Question

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

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

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

非常感谢任何帮助。

Answer 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是否低于某个阈值，并且只应用更改

Answer 2

我使用插值法解决了

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

Answer 3

transform 和clamp 方法会在一定程度上起作用。但是，元件可能会卡在钳位值 b/c 处，用户可能会尝试重复移动元件，从而累积距离已经远远超出限制。

这看起来会卡住。需要多次将其向相反方向移动才能将累积距离恢复到所需状态。

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

上的回答

使用PanResponder进行锁定运动

3 个答案: