react native scrollview深入详解触摸滚动事
2019-04-09 本文已影响0人
二斤寂寞
大家都知道scrollview的几个属性和方法：详细的方法请参考：
江清清专栏：React Native控件之ScrollView组件讲解(14)
这里我就讲解下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上进行测试，测试的结果如下：
image.png
scrollview-ios
由上图可以看出执行的顺序，
首先是按下屏幕时触发onTouchStart，
然后手指移动触发onTouchMove，会调用一次或者多次，
如果左右滑动，滑动开始拖动触发onScrollBeginDrag，View开始变化，View成为响应者，
然后onScroll … onTouchMove这两个会触摸多次，
然后手指离开屏幕触发onResponderRelease，
接着触摸结束onTouchEnd
然后是滑动结束拖拽时触发onScrollEndDrag，接着就是一帧滚动的开始onMomentumScrollBegin，它的起始位置和onScrollEndDrag的结束位置重合；
然后是滚动滚动onScroll，
然后是一帧滚动的结束onMomentumScrollEnd，
最后偶尔还会滚动下onScroll，这个有时间不出来，我觉得跟有抖动一样
大家可以自己测试下哦
4、android上的时间分为两种，一个是滑动一次，一个是连续滑动两次甚至多次，详见下图：
4.1、滑动一次
image.png
scrollview-android滑动一次的结果
大家可以看出和ios的区别，页面意识滚动了一页
少了个触摸结束`onTouchEnd`，`onResponderGrant`、`onResponderRelease`，这三个（为啥？目前我还不清楚），
直接就是`触摸开始-->移动-->开始拖拽-->滚动-->拖拽结束（手指离开了）-->一帧滚动开始-->滚动-->一帧滚动结束-->滚动`，
如果不滑动，只是点击离开，只会触发`onTouchStart`和`onTouchEnd`；
4.2、滑动两次或者多次：
image.png
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为何如何设计，我就不得而知了，还希望知道的同学能够分享下。
代码如下：
image.png
image.png
image.png
image.png
转载文章：https://blog.csdn.net/liu__520/article/details/53676834
