react-native scrollview触摸滚动事件

小咪咪 2022-02-28 14:10 473阅读 0赞

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

1.  `onScroll`：在滚动过程中, 每帧最多调用一次此函数, 调用的频率可以用scrollEventThrottle属性来控制.
2.  `onMomentumScrollEnd`：当一帧滚动完毕时调用.
3.  `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][]

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

1.  首先是按下屏幕时触发onTouchStart，
2.  然后手指移动触发onTouchMove，会调用一次或者多次，
3.  如果左右滑动，滑动开始拖动触发onScrollBeginDrag，View开始变化，View成为响应者，
4.  然后onScroll … onTouchMove这两个会触摸多次，
5.  然后手指离开屏幕触发onResponderRelease，
6.  接着触摸结束onTouchEnd
7.  然后是滑动结束拖拽时触发onScrollEndDrag，接着就是一帧滚动的开始onMomentumScrollBegin，它的起始位置和onScrollEndDrag的结束位置重合；
8.  然后是滚动滚动onScroll，
9.  然后是一帧滚动的结束onMomentumScrollEnd，
10. 最后偶尔还会滚动下onScroll，这个有时间不出来，我觉得跟有抖动一样

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

## 4.1、滑动一次 ##

![scrollview-android滑动一次的结果][scrollview-android]

大家可以看出和ios的区别

1.  少了个触摸结束onTouchEnd，onResponderGrant、onResponderRelease，这三个.  
    直接就是触摸开始-->移动-->开始拖拽-->滚动-->拖拽结束（手指离开了）-->一帧滚动开始-->滚动-->一帧滚动结束-->滚动
2.  如果不滑动，只是点击离开，只会触发onTouchStart和onTouchEnd；

## 4.2、滑动两次或者多次： ##

![scrollview-android滑动2次的结果][scrollview-android_2]

本博客所记录的文章，主要是从网络收集的，有一些因为经过多次转载，所以出处已经不知，若是侵权，请通知我，我及时修改。本博客主要是用来记录我对所写文章的理解，若有错误，请大家指点，相互学习！

[scrollview-ios]: /images/20220228/3c9fad475ec84c0595ee1af5144b8864.png
[scrollview-android]: /images/20220228/d8185b0cbfa9451aa78deac12a93f15f.png
[scrollview-android_2]: /images/20220228/63f64398d9764f91bc986c818b7a6eb0.png