在本机反应中使用 PanResponder 锁定运动答案

【问题标题】：Lock movement with PanResponder in react native在本机反应中使用 PanResponder 锁定运动
【发布时间】：2017-04-22 20:59:47
【问题描述】：

使用react native PanResponder，当屏幕触摸坐标超出一定范围值时，如何阻止移动？

例如，如何防止用户将组件移动到屏幕上某个 y 位置以下？

PanResponder 使用Gesture Responder System。

我正在仔细阅读文档，但找不到答案。

非常感谢任何帮助。

【问题讨论】：

嗨，AlexB！ @jaws 的回答似乎奏效了。您介意分享一些应用答案后的示例吗？谢谢

标签： react-native

【解决方案1】：

查看您提供的 PanResponder 文档页面 (https://facebook.github.io/react-native/docs/panresponder.html)，我认为您可以修改示例以满足您的需求。

负责对手势做出响应的函数是 PanResponder 的一个名为 onPanResponderMove 的属性，在文档的示例代码中如下所示：

_handlePanResponderMove: function(e: Object, gestureState: Object) {
    this._circleStyles.style.left = this._previousLeft + gestureState.dx;
    this._circleStyles.style.top = this._previousTop + gestureState.dy;
    this._updateNativeStyles();
},

gestureState 对象如下所示：

stateID - ID of the gestureState- persisted as long as there at least one touch on screen
moveX - the latest screen coordinates of the recently-moved touch
moveY - the latest screen coordinates of the recently-moved touch
x0 - the screen coordinates of the responder grant
y0 - the screen coordinates of the responder grant
dx - accumulated distance of the gesture since the touch started
dy - accumulated distance of the gesture since the touch started
vx - current velocity of the gesture
vy - current velocity of the gesture
numberActiveTouches - Number of touches currently on screen

您可以在 _handlePanResponderMove 中添加条件检查，以确定 gestureState.y0 是否低于某个阈值，如果是，则仅应用更改

【讨论】：

【解决方案2】：

我使用插值解决了它

transform: [
  {
    translateX: this._translateX.interpolate({
      inputRange: [0, 100],
      outputRange: [0, 100],
      extrapolate: 'clamp',
    }),
  },
],

【讨论】：

【解决方案3】：

transform 和clamp 方法会在一定程度上起作用。但是，组件可能会停留在钳位值 b/c，用户可能会尝试反复移动组件，以至于累积的距离已经远远超出限制。

这看起来像是卡住了。需要多次将其向相反方向移动，以使累积的距离恢复到所需的状态。

我描述了如何通过在 pan.setOffset 中设置限制来解决类似的问题，这可能对其他人有帮助。在ReactNative PanResponder limit X position查看我的回答

【讨论】：