react-native - 在 React Native 中使用 PanResponder 锁定运动

Question

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

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

PanResponder 使用 Gesture Responder System .

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

任何帮助是极大的赞赏。

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();
},

手势状态对象如下所示:

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 是否低于某个阈值，如果是，则仅应用更改