PanResponder
PanResponder
将多次触摸协调成单个手势。它使单点触摸手势能够抵抗额外的触摸,并可用于识别基本的多点触摸手势。
默认情况下,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} />;
};
示例
PanResponder
与 Animated
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*
回调。它们仅反映冒泡/捕获到节点的 start/end 事件的更新后的 gestureState
。一旦节点成为响应者,您就可以依赖手势处理的每个 start/end 事件以及相应更新的 gestureState
。(numberActiveTouches)可能不是完全准确的,除非您是响应者。