PanResponder
PanResponder将几次触摸调和成一个手势。它使单点触摸手势具有弹性，可用于识别简单的多点触摸手势。
默认情况下，PanResponder持有InteractionManager阻止长时间运行的JS事件中断活动手势的句柄。
它提供了姿态响应系统提供的响应者处理程序的可预测包装。对于每个处理程序，它会gestureState在本机事件对象旁边提供一个新对象：
onPanResponderMove: (event, gestureState) => {}本地事件是以下形式的合成触摸事件：
nativeEventchangedTouches- 自上次事件以来已更改的所有触摸事件的数组identifier- 触摸的IDlocationX- 触摸的X位置，相对于元素locationY- 触摸的Y位置，相对于元素pageX- 触摸的X位置，相对于根元素pageY- 触摸的Y位置，相对于根元素target- 接收触摸事件的元素的节点IDtimestamp- 触摸的时间标识符，用于速度计算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）可能不完全准确，除非你是响应者。
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
