PanResponder

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

PanResponder 可将多个触摸点整合为单一手势。它使单点触控手势不受额外触摸点干扰，并能识别基础多点触控手势。

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

它为手势响应系统提供的响应处理器提供了可预测的封装。针对每个处理器，它会在原生事件对象之外额外提供一个新的 gestureState 对象：

onPanResponderMove: (event, gestureState) => {}

原生事件是以 PressEvent 形式存在的合成触摸事件。

gestureState 对象包含以下属性：

• stateID - gestureState 的唯一标识符，只要屏幕存在至少一个触摸点就会持续存在

• moveX - 最近移动触摸点的当前屏幕 X 坐标

• moveY - 最近移动触摸点的当前屏幕 Y 坐标

• x0 - 响应器授予时的屏幕 X 坐标

• y0 - 响应器授予时的屏幕 Y 坐标

• dx - 手势开始至今的累积水平位移

• dy - 手势开始至今的累积垂直位移

• vx - 手势当前水平方向速度

• vy - 手势当前垂直方向速度

• numberActiveTouches - 当前屏幕上的有效触摸点数量

使用模式

tsx

const ExampleComponent = () => {
  const panResponder = React.useRef(
    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;
      },
    }),
  ).current;

  return <View {...panResponder.panHandlers} />;
};

示例

PanResponder 与 Animated API 协同工作，帮助构建复杂的 UI 手势操作。以下示例包含一个可自由拖拽的动画 View 组件：

请尝试 RNTester 中的 PanResponder 示例。

---

参考

方法

create()

tsx

static create(config: PanResponderCallbacks): PanResponderInstance;

参数:

Name	Type	Description
config Required	object	Refer below

config 对象提供了增强版的响应器回调函数，不仅包含 PressEvent 事件，还包含 PanResponder 手势状态。这些回调通过在标准 onResponder* 回调名称中将 Responder 替换为 PanResponder 来实现。例如，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）的准确性可能受限，除非当前节点是响应者。