美文网首页
【有码教育】react native scrollview深入详

【有码教育】react native scrollview深入详

作者: 有码教育 | 来源:发表于2017-07-18 16:55 被阅读0次

    这里我就讲解下scrollview的触摸和滑动顺序,并讲解下scrollview的几个触摸方法

    1、几个已知的滑动或者滑动开始结束的方法:

    onScroll:在滚动过程中, 每帧最多调用一次此函数, 调用的频率可以用scrollEventThrottle属性来控制.

    onMomentumScrollEnd:当一帧滚动完毕时调用.

    onScrollAnimationEnd :ios上的当滚动动画结束时调用.

    2、还有其他的一些事件如下,触摸事件里面有携带event,大家可以再下面的方法里面更改一些view操作就可以打印出来这些event携带的信息了

    1、onScrollBeginDrag:一个子view滑动开始拖动开始时触发,注意和onMomentumScrollBegin的区别

    2、onScrollEndDrag:一个子view滚动结束拖拽时触发,注意和onMomentumScrollEnd的区别

    3、onTouchStart:按下屏幕时触发

    4、onTouchMove:移动手指时触发

    5、onTouchEnd:手指离开屏幕触摸结束时触发

    6、onMomentumScrollBegin:当一帧滚动开始时调用.

    7、onMomentumScrollEnd:当一帧滚动完毕时调用.

    8、onStartShouldSetResponder:触摸开始时是否成为响应者

    9、onStartShouldSetResponderCapture:防止子视图在触摸开始时成为应答器

    10、onScrollShouldSetResponder:滚动时是否成为响应者

    11、onResponderGrant:开始响应时触发

    12、onResponderRelease:手指释放后,视图成为响应者

    13、onResponderReject:响应拒绝

    14、onScroll:滚动时触发,会触发多次

    3、下面就这些方法的顺序做个简单的介绍:

    首先在ios上进行测试,测试的结果如下:

    scrollview-ios

    由上图可以看出执行的顺序,

    首先是按下屏幕时触发onTouchStart,

    然后手指移动触发onTouchMove,会调用一次或者多次,

    如果左右滑动,滑动开始拖动触发onScrollBeginDrag,View开始变化,View成为响应者,

    然后onScroll … onTouchMove这两个会触摸多次,

    然后手指离开屏幕触发onResponderRelease,

    接着触摸结束onTouchEnd

    然后是滑动结束拖拽时触发onScrollEndDrag,接着就是一帧滚动的开始onMomentumScrollBegin,它的起始位置和onScrollEndDrag的结束位置重合;

    然后是滚动滚动onScroll,

    然后是一帧滚动的结束onMomentumScrollEnd,

    最后偶尔还会滚动下onScroll,这个有时间不出来,我觉得跟有抖动一样

    大家可以自己测试下哦

    4、android上的时间分为两种,一个是滑动一次,一个是连续滑动两次甚至多次,详见下图:

    4.1、滑动一次

    scrollview-android滑动一次的结果

    大家可以看出和ios的区别,页面意识滚动了一页

    少了个触摸结束onTouchEnd,onResponderGrant、onResponderRelease,这三个(为啥?目前我还不清楚),

    直接就是触摸开始-->移动-->开始拖拽-->滚动-->拖拽结束(手指离开了)-->一帧滚动开始-->滚动-->一帧滚动结束-->滚动,

    如果不滑动,只是点击离开,只会触发onTouchStart和onTouchEnd;

    4.2、滑动两次或者多次:

    scrollview-android滑动2次的结果

    大家可以看出区别,滑动了两次,

    在拖拽开始onScrollBeginDrag和拖拽结束onScrollEndDrag之间没有了滚动onScroll;

    然后一帧滚动的开始onMomentumScrollBegin;

    然后竟然出发了开始收拾操作的方法onResponderGrant;

    再次触发触摸开始:onTouchStart;

    然后再一次的拖拽开始onScrollBeginDrag和拖拽结束onScrollEndDrag,中间有了onscroll,可能是滚动变慢了,手指离开了,就有了onScroll;

    最后是一帧滚动的结束onMomentumScrollEnd,

    这里没有onScroll。

    这里的view是滚动了两页也就是从1-2,然后从2-3,最后停在了第三页,也就是一帧开始和结束之间可能存在2-3次的滑动,也就是可能会出现view切换了2-3页面,根据你的滑动的速度和手机的处理能力了。

    5、至于FB为何如何设计,我就不得而知了,还希望知道的同学能够分享下。

    代码如下:

    感兴趣的同学可以自行写一遍代码哦:

    scrollview-1

    scrollview-2

    scrollview-3

    scrollview-4

    相关文章

      网友评论

          本文标题:【有码教育】react native scrollview深入详

          本文链接:https://www.haomeiwen.com/subject/mfyhkxtx.html