react native scrollview深入详解触摸滚动事件

大家都知道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上进行测试，测试的结果如下：

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