跳到主要内容

PanResponder

PanResponder 将多个触摸事件协调成一个手势。它使单点触控手势能够抵御额外触摸的影响,并可用于识别基本的Mmulti-touch手势。

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

它为手势响应系统提供的响应器处理程序提供了可预测的包装。对于每个处理程序,它除了提供原生事件对象外,还提供一个新的 gestureState 对象。

onPanResponderMove: (event, gestureState) => {}

原生事件是具有 PressEvent 形式的合成触摸事件。

gestureState 对象具有以下属性:

  • stateID - gestureState 的 ID - 只要屏幕上至少有一个触摸,就会一直存在。
  • moveX - 最近移动的触摸的最新屏幕坐标。
  • moveY - 最近移动的触摸的最新屏幕坐标。
  • x0 - 响应器授予时的屏幕坐标。
  • y0 - 响应器授予时的屏幕坐标。
  • 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} />;
};

示例

PanResponderAnimated API 协同工作,以帮助在 UI 中构建复杂手势。以下示例包含一个可自由拖动到屏幕任意位置的动画 View 组件。

尝试在 RNTester 中使用 PanResponder 示例


参考

方法

create()

tsx
static create(config: PanResponderCallbacks): PanResponderInstance;

参数

姓名类型描述
config
必需
对象请参考下方内容

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)可能不完全准确,除非您是响应器。