23.React Native触摸事件处理学习；

目录

1.什么是触摸事件

2.基础触摸事件组件

3.React Native单组件触摸响应

3.1申请成为响应者和释放响应者

3.2合成事件介绍-evt

4.嵌套组件事件传递

4.1正常事件响应顺序

4.2父视图拦截事件传递

5.手势识别-PanResponder

5.1PanResponder类介绍

5.2gestureState参数介绍

5.3PanResponder基本用法 

5.4PanResponder使用示例

6.总结

---

1.什么是触摸事件

简单理解就是我们手指在屏幕上的触摸动作-移动应用上的用户交互基本靠“摸”。当然，“摸”也是有各种姿势的：在一个按钮上点击，在一个列表上滑动，或是在一个地图上缩放。

触摸是手机的核心功能，也是每个开发应用的交互基础，Android和IOS都有完善的事件处理机制；React Native（RN）也有完善 的事件处理机制，能方便处理的用户的触摸事件和手势操作；

2.基础触摸事件组件

通常需要监听简单的点击或者长安只需要使用"Touchable"开头的一系列组件，这些组件通过onPress属性接受一个点击事件的处理函数。当一个点击操作开始并且终止于本组件时（即在本组件上按下手指并且抬起手指时也没有移开到组件外），此函数会被调用。

常用的触摸组件TouchableHighlight，TouchableNativeFeedback，TouchableWithoutFeedback，TouchableOpacity可以根据按下显示效果选择不同的Touchable组件;

可点击的组件需要给用户提供视觉反馈，例如是哪个组件正在响应用户的操作，以及当用户抬起手指后会发生什么。用户也应可以通过把手指移到一边来取消点击操作。

具体使用哪种组件，取决于你希望给用户什么样的视觉反馈：
a.一般来说，你可以使用TouchableHighlight来制作按钮或者链接。注意此组件的背景会在用户手指按下时变暗。
b.在Android上还可以使用TouchableNativeFeedback，它会在用户手指按下时形成类似墨水涟漪的视觉效果。
c.TouchableOpacity会在用户手指按下时降低按钮的透明度，而不会改变背景的颜色。
d.如果你想在处理点击事件的同时不显示任何视觉反馈，则需要使用TouchableWithoutFeedback；

示例：

class MyButton extends Component {
  _onPressButton() {
    console.log("You onPress the button!");
  }

  _onLongPress() {
    console.log("You onLongPress the button!");
  }

  _onPressIn() {
    console.log("You onPressIn the button!");
  }
  _onPressOut() {
    console.log("You onPressOut the button!");
  }

  render() {
    return (
      <TouchableHighlight 
            onPress={this._onPressButton}    //按下抬起时触发
            onLongPress={this._onLongPress}    //长按监听
            //当触摸操作结束时调用，但如果被取消了则不调用（譬如响应者被一个滚动操作取代）
            onPressIn={this._onPressIn}        //按下监听
            onPressOut={this._onPressOut}      //抬起监听
            >
        <Text>Button</Text>
      </TouchableHighlight>
    );
  }
}

RN提供相关Touchable**触摸事件的完整监听和处理，可以参考RN中文网；

https://reactnative.cn/docs/0.50/touchablewithoutfeedback.html

3.React Native单组件触摸响应

一个View并不是自动成为事件响应者，一个View只要实现了正确的协商方法，就可以成为触摸事件的响应者。一个完整的事件从手指触摸屏幕开始，系统通过回调询问View是否愿意成为事件响应者，成为响应者，处理触摸事件，响应者释放，结束触摸事件处理；

单个组件响应者生命的生命周期处理流程图：

单组件分为两种状态，非响应者状态和响应者状态 ，非响应状态指未接收处理触摸事件之前，响应者状态接收并开始处理触摸 事件；

默认情况下，组件属于非响应者状态，即不接收触摸事件，需要通过onStartShouldSetResponder和onMoveShouldSetResponder回调方法返回bool值决定是否成为事件响应者；

3.1申请成为响应者和释放响应者

分为三个阶段：

a.“询问”成为响应者阶段

我们通过两个方法去“询问”一个View是否愿意成为响应者：

1)View.props.onStartShouldSetResponder: (event) => [true | false], 其中 event 是一个合成