react-native – 使用PanResponder进行锁定运动

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

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

我正在仔细阅读文档,但我找不到答案.

任何帮助是极大的赞赏.

查看您提供的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是否低于某个阈值,并且只应用更改

react-native – 使用PanResponder进行锁定运动

相关文章