react native之PanResponder手势识别初探

PanResponder平底锅的响应者

PanResponder类可以将多点触摸操作协调城一个手势，它使得一个单点触摸可以接受更多的触摸操作，也可以用于识别简单的多点触摸手势。

PanResponder的基本思想是：监视屏幕上指定大小、位置的矩形区域，当用手指按压这个区域中的某个点后，开发者会收到这个事件，当按压后拖动手指时，会收到手势引发的各类事件，当手指离开这个矩形区域时，开发者也会收到相应的事件。

注意：开发者可以任意指定监视矩形区域的大小，但在这个区域里，只有第一个按下的事件会上报和继续监视处理，如果第一个手指按下还没有离开，接着第二个手指又来按下了，那么第二个手指的各种触摸事件无法捕获。

注意：开发者可以在屏幕上指定多个监视矩形区域，但不能同时监视多个矩形区域的不同触摸事件

注意：监视区域会阻止被监视区域覆盖的组建接受触摸事件，比如监视区域覆盖了一个按钮，那么就无法通过按这个按钮来触发其对应的事件，只能在PanResponder监视器的事件处理中对触摸行为进行处理

利用PanResponder实现监视器有以下几个步骤：

1.指定监视区域。如果件事去有多个，一定不能重叠，否则都失效

2.定义监视器相关变量

指向监视器的变量(必须有)、指向监视器监视区域的变量(可以有)、记录监视区域左上角顶点坐标的两个数值变量(可以有)、上一次触摸点的横纵坐标变量(可以有)

3.准备监视器的事件处理函数

4.建立监视器（PanResponder.create）

5.将监视器与监视区域关联{...this._panResponder.panHandlers}

...............................................................................................................................................................................

它提供了一个对触摸响应系统响应器的可预测的包装。对于每一个处理函数，它在原生事件之外提供了一个新的gestureState对象。

基本用法

componentwillMount: function() {
    this._panResponder = PanResponder.create({
      // 要求成为响应者：
      onStartShouldSetPanResponder: (evt,gestureState) => true,onStartShouldSetPanResponderCapture: (evt,onMoveShouldSetPanResponder: (evt,onMoveShouldSetPanResponderCapture: (evt,//处理手指按下(点击)事件
      onPanResponderGrant: (evt,gestureState) => {
        // 开始手势操作。给用户一些视觉反馈，让他们知道发生了什么事情！

        // gestureState.{x,y} 现在会被设置为0
      },//处理手指移动的事件
      onPanResponderMove: (evt,gestureState) => {
        // 最近一次的移动距离为gestureState.move{X,Y}

        // 从成为响应者开始时的累计手势移动距离为gestureState.d{x,y}
      },onPanResponderTerminationRequest: (evt,onPanResponderRelease: (evt,gestureState) => {
        // 用户放开了所有的触摸点，且此时视图已经成为了响应者。
        // 一般来说这意味着一个手势操作已经成功完成。
      },onPanResponderTerminate: (evt,gestureState) => {
        // 另一个组件已经成为了新的响应者，所以当前手势将被取消。
      },onShouldBlockNativeResponder: (evt,gestureState) => {
        // 返回一个布尔值，决定当前组件是否应该阻止原生组件成为JS响应者
        // 默认返回true。目前暂时只支持android。
        return true;
      },});
  },render: function() {
    return (
      <View {...this._panResponder.panHandlers} />
    );
  },

方法