1.RN的基本触摸事件
RN的组件除了TextInput、ScrollView（ListView）外，默认是不支持点击事件，也不能响应基本触摸事件，所以RN中提供了几个直接处理响应事件的组件，TouchableHighlight，TouchableNativeFeedback，TouchableOpacity和TouchableWidthoutFeedback。这四个Touch类组件有如下回调方法：
- onPressIn: 点击开始
- onPressOut: 点击结束或者离开
- onPress: 单击事件回调
- onLongPress: 长按事件回调
以TouchableOpacity使用为例：
<TouchableHighlight
onPressIn={() => console.log("onPressIn")}
onPressOut={() => console.log("onPressOut")}
onPress={() => console.log("onPress")}
onLongPress={() => console.log("onLongPress")}/>
2.单组件触摸事件处理
单个组件的单次操作交互处理的生命周期如下：
在整个事件中，组件可以在非事件响应者和事件响应者中切换身份
非事件响应者
默认情况下，触摸事件输入不会直接传递给组件，不能进行事件响应处理，也就是非事件响应者。如果组件要进行触摸事件处理，首先要申请成为事件响应者，组件有如下两个属性可以做这样的申请：
- View.props.onStartShouldSetResponder，这个属性接收一个回调函数，函数原型是function(evt): bool，在触摸事件开始(touchDown)的时候，RN会回调此函数，询问组件是否需要成为事件响应者，接收事件处理，如果返回true，表示需要成为响应者
- View.props.onMoveShouldSetResponder，它和前一个属性类似，不过这是触摸，是进行过程中(touchMove)，RN询问组件是否要成为响应者，返回true表示想要成为响应者
假如组件通过上面的方法反回了true，表示发出了申请要成为事件响应者，想要接收后续的事件输入。因为同一时刻，只能有一个事件处理响应者，RN还需要协调所有组件的事件处理请求，所以不是每个组件申请都能成功，RN通过如下两个回调来通知告诉组件它的申请结果：
- View.props.onResponderGrant: (evt) => {}：表示申请成功，组件成为了事件处理响应者，这时组件就开始接收后序的触摸事件输入。一般情况下，这时开始，组件进入了激活状态，并进行一些事件处理或者手势识别的初始化。
- View.props.onResponderReject: (evt) => {}：表示申请失败了，这意味着其他组件正在进行事件处理，并且它不想放弃事件处理，所以你的申请被拒绝了，后续输入事件不会传递给本组件进行处理。
事件响应者
如果通过上面的步骤，组件申请成为了事件响应者，后绪的事件输入都会通过回调函数通知到组件：
- View.props.onResponderStart: (evt) => {}：表示手指按下时，成功申请为事件响应者的回调
- View.props.onResponderMove: (evt) => {}：表示触摸手指移动的事件，这个回调非常频繁，所以这个回调函数的内容需要尽量简单
- View.props.onResponderRelease: (evt) => {}：表示触摸完成(touchUp)时候的回调，表示用户完成了本次的触摸交互，这里应该完成手势识别的处理，这以后，组件不再是事件响应者，组件取消激活
- View.props.onResponderEnd: (evt) => {}：表示组件结束事件响应的回调
在上面的图中也可以看到，在组件成为事件响应者期间，其他组件也可能会申请触摸事件处理。此时RN会通过回调询问是否可以让出响应者角色。回调如下：
- View.props.onResponderTerminationRequest: (evt) => bool
如果回调函数返回为true，则表示同意释放响应者角色，同时会回调如下函数，通知组件事件响应处理被终止了：
- View.props.onResonderTerminate: (evt) => {}
这个回调也会发生在系统直接终止组件的事件处理，例如用户在触摸操作过程中，突然来电话的情况。
事件数据结构
之前的事件处理函数只写了一个参数，实际上有两个参数，一个是nativeEvent（原生事件）；另一个是gestureState（手势状态）
原生事件有以下成员变量：
- identifier：触摸的ID，一般对应手指，在多点触控的时候，用来区分哪个手指的触摸事件；
- locationX和locationY：触摸点相对父元素的坐标
- pageX和pageY：触摸点相对屏幕的坐标
- timestamp：当前触摸的事件的时间戳，可以用来进行滑动计算
- target：接收当前触摸事件的组件ID
- changedTouches：evt数组，丛上次回调上报的触摸事件，到这次上报之间的所有事件数组。因为用户触摸过程中，会产生大量事件，有时候可能没有及时上报，系统用这种方式批量上报；
- touches：evt数组，多点触摸的时候，包含当前所有触摸点的事件
由于RN没有多点触控的概念，所以有些属性是不能用的，最常用的是locationX和locationY数据，需要注意的是，因为这里是Native的数据，所以他们的单位是实际像素。如果要转换为RN的逻辑单位，可以使用如下方式：
let pX = evt.nativeEvent.locationX / PixelRatio.get();
3.嵌套组件事件处理
前面也提到过，当组件需要作为事件处理响应者时，需要通过onStartShouldSetResponder或者onMoveShouldSetResponder回调返回true来申请。加入当多个组件嵌套的时候，这两个回调都反回了true的时候，但是同一个只能有一个事件处理响应者，这种情况如何处理？假设有如下布局：
在RN中，默认情况下使用冒泡机制，最深的组件最先开始响应，所以前面描述的情况，若A、B、C三个组件的onStartShouldSetResponder都返回为true，那么只有C组件会得到响应成为响应者。这种机制才能保证界面所有的组件都能得到正确的响应。但是有些情况下，父组件可能需要处理事件，RN提供了一个劫持机制，也就是在触摸事件往下传递的时候，先询问父组件是否需要劫持，不给子组件传递事件，也就是如下两个回调：
- View.props.onStartShouldSetResponderCapture：这个属性接收一个回调函数，函数的原型是function(evt): bool，在触摸事件开始(touchDown)的时候，RN容器组件会回调函数，询问组件是否要劫持事件，如果返回true，表示需要劫持
- View.props.onMoveShouldSetResponderCapture：与之前类似，不过是在触摸事件询问容器是否是劫持
4.回调函数总结
- onStartShouldSetPanResponder: (e, gestureState) => bool
- onStartShouldSetPanResponder: (e, gestureState) => bool
- onMoveShouldSetPanResponder: (e, gestureState) => bool
- onMoveShouldSetPanResponderCapture: (e, gestureState) => bool
- onPanResponderReject: (e, gestureState) => {...}
- onPanResponderGrant: (e, gestureState) => {...}
- onPanResponderStart: (e, gestureState) => {...}
- onPanResponderEnd: (e, gestureState) => {...}
- onPanResponderRelease: (e, gestureState) => {...}
- onPanResponderMove: (e, gestureState) => {...}
- onPanResponderTerminate: (e, gestureState) => {...}
- onPanResponderTerminateRequest: (e, gestureState) => {...}
- onShouldBLockNativeResponder: (e, gestureState) => bool
可以看到，这些接口与前面接收的基础回调基本上是一一对应的，其功能也是类似，这里就不再赘述。这里有一个特别的回调 onShouldBlockNativeResponder
表示是否用 Native 平台的事件处理，默认是禁用的，全部使用 JS 中的事件处理，注意此函数目前只能在 Android 平台上使用
版权声明：本文来源简书，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://www.jianshu.com/p/28e77aa3bd0f
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。
