在 React Native 中使用 PanResponder 锁定运动 [英] Lock movement with PanResponder in react native

问题描述

使用 react native PanResponder，我怎样才能阻止移动屏幕触摸坐标超出某个值范围?

Using react native PanResponder, how can I block the movement when the screen touch coordinates are outside of a certain range of values?

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

For example, how can I prevent users from moving a component below a certain y position on the screen?

PanResponder 使用手势响应系统.

The PanResponder uses the Gesture Responder System.

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

I am carefully reading the documentation, but I cannot find the answer.

非常感谢任何帮助.

推荐答案

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

Looking at the PanResponder documentation page you provided (https://facebook.github.io/react-native/docs/panresponder.html), I think you could modify the example to meet your needs.

负责对手势采取行动的函数是 PanResponder 的一个名为 onPanResponderMove 的属性，在文档中的示例代码中，如下所示:

The function responsible for taking action in response to a gesture is a property of PanResponder called onPanResponderMove, in the example code from the documentation this looks like:

_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 对象如下所示:

Where the gestureState object looks like this:

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

You might add a conditional check in _handlePanResponderMove to determine if the gestureState.y0 is below some threshold, and only apply a change if so

这篇关于在 React Native 中使用 PanResponder 锁定运动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！