首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

PanResponder

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

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

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

代码语言:javascript
复制
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 - 当前在屏幕上的触摸次数

基本用法

代码语言:javascript
复制
  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手势状态。只需更换这个词ResponderPanResponder在每一个典型的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)可能不完全准确,除非你是响应者。

扫码关注腾讯云开发者

领取腾讯云代金券