PanResponder

PanResponder将几次触摸调和成一个手势。它使单点触摸手势具有弹性，可用于识别简单的多点触摸手势。

默认情况下，PanResponder持有InteractionManager阻止长时间运行的JS事件中断活动手势的句柄。

它提供了姿态响应系统提供的响应者处理程序的可预测包装。对于每个处理程序，它会gestureState在本机事件对象旁边提供一个新对象：

onPanResponderMove: (event, gestureState) => {}

本地事件是以下形式的合成触摸事件：

• nativeEvent
  • changedTouches - 自上次事件以来已更改的所有触摸事件的数组
  • identifier - 触摸的ID
  • locationX - 触摸的X位置，相对于元素
  • locationY - 触摸的Y位置，相对于元素
  • pageX - 触摸的X位置，相对于根元素
  • pageY - 触摸的Y位置，相对于根元素
  • target - 接收触摸事件的元素的节点ID
  • timestamp - 触摸的时间标识符，用于速度计算
  • touches - 屏幕上所有当前触摸的数组

一个gestureState对象具有以下内容：

• stateID - 只要屏幕上至少有一次触摸，gestureState的ID就会保持
• moveX - 最近移动的触摸的最新屏幕坐标
• moveY - 最近移动的触摸的最新屏幕坐标
• x0 - 响应者授权的屏幕坐标
• y0 - 响应者授权的屏幕坐标
• dx - 触摸开始后手势的累计距离
• dy - 触摸开始后手势的累计距离
• vx - 手势的当前速度
• vy - 手势的当前速度
• numberActiveTouches - 当前在屏幕上的触摸次数

基本用法

  componentWillMount: function() {
    this._panResponder = PanResponder.create({
      // Ask to be the responder:
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,

      onPanResponderGrant: (evt, gestureState) => {
        // The gesture has started. Show visual feedback so the user knows
        // what is happening!

        // gestureState.d{x,y} will be set to zero now
      },
      onPanResponderMove: (evt, gestureState) => {
        // The most recent move distance is gestureState.move{X,Y}

        // The accumulated gesture distance since becoming responder is
        // gestureState.d{x,y}
      },
      onPanResponderTerminationRequest: (evt, gestureState) => true,
      onPanResponderRelease: (evt, gestureState) => {
        // The user has released all touches while this view is the
        // responder. This typically means a gesture has succeeded
      },
      onPanResponderTerminate: (evt, gestureState) => {
        // Another component has become the responder, so this gesture
        // should be cancelled
      },
      onShouldBlockNativeResponder: (evt, gestureState) => {
        // Returns whether this component should block native components from becoming the JS
        // responder. Returns true by default. Is currently only supported on android.
        return true;
      },
    });
  },

  render: function() {
    return (
      <View {...this._panResponder.panHandlers} />
    );
  },

工作示例

要查看它的实际运行情况，请尝试使用RNTester中的PanResponder示例

方法

静态创建（配置）

@param {object} config所有响应者回调的增强版本，它们不仅提供了典型的ResponderSyntheticEvent，还提供了PanResponder手势状态。只需更换这个词Responder用PanResponder在每一个典型的onResponder*回调。例如，该config对象看起来像：

• onMoveShouldSetPanResponder: (e, gestureState) => {...}
• onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}
• onStartShouldSetPanResponder: (e, gestureState) => {...}
• onStartShouldSetPanResponderCapture: (e, gestureState) => {...}
• onPanResponderReject: (e, gestureState) => {...}
• onPanResponderGrant: (e, gestureState) => {...}
• onPanResponderStart: (e, gestureState) => {...}
• onPanResponderEnd: (e, gestureState) => {...}
• onPanResponderRelease: (e, gestureState) => {...}
• onPanResponderMove: (e, gestureState) => {...}
• onPanResponderTerminate: (e, gestureState) => {...}
• onPanResponderTerminationRequest: (e, gestureState) => {...}
• onShouldBlockNativeResponder: (e, gestureState) => {...} 通常，对于具有捕获等价物的事件，我们在捕获阶段更新一次gestureState，并且也可以在气泡阶段使用它。请小心onStartShould *回调。它们只反映了更新gestureState的泡沫/捕获到节点的开始/结束事件。一旦节点是响应者，就可以依靠手势处理的每个开始/结束事件并相应地gestureState进行更新。（numberActiveTouches）可能不完全准确，除非你是响应者。