在步骤中创建 gestureState return 值（类似网格的行为）

Question

我正在使用 'react-native-draggable' 创建平面图生成器，并且我正在修改包以满足我们的需求，因为此包不支持网格步进行为。

默认情况下，

const {dx, dy} = gestureState;

dx / dy 将始终以 0 作为起点，无论任何对象在屏幕上的位置如何 - 它测量您的手指在 x 和 y 上移动的距离在您开始拖动对象的那一刻。

为了使对象逐步移动，我想尝试将 gestureState 重置为 0 如果 dx 或 dy 高于 20px / 下面 -20px 来模拟 20x20 网格槽的网格。但是 gestureState 返回的值似乎是恒定的（这是有道理的）所以一旦你开始移动，它就会一直测量直到你松开。

知道我将如何解决这个问题吗？

  const handleOnDrag = React.useCallback(
    (e, gestureState) => {
      const {dx, dy} = gestureState; // always returns a value from 0
      const {top, right, left, bottom} = startBounds.current;
      const far = 999999999;
     
      const changeX = clamp(
        dx, // New value it will animate object to (!!)
        Number.isFinite(minX) ? minX - left : -far, // checks if any boundaries are set on X
        Number.isFinite(maxX) ? maxX - right : far, // checks if any boundaries are set on X
      );
      const changeY = clamp(
        dy, // New value it will animate object to (!!)
        Number.isFinite(minY) ? minY - top : -far, // checks if any boundaries are set on Y
        Number.isFinite(maxY) ? maxY - bottom : far, // checks if any boundaries are set on Y
      );

        // Animate object
        pan.current.setValue({x: changeX, y: changeY});
      
        onDrag(e, gestureState);
    },
    [maxX, maxY, minX, minY, onDrag],
  );

如有任何帮助，我们将不胜感激！

Answer 1

我通过使用 Math.round() 四舍五入到最接近的 50（或任何取决于网格大小的小数）解决了这个问题

Math.round(dx/50) * 50

和

Math.round(dx/50) * 50

在步骤中创建 gestureState return 值（类似网格的行为）

Make gestureState return values in steps (grid-like behavior)

react-native

react-native-android

react-native-ios