慢性能反应-使用手势和反应-弹簧

Question

在文档中拖动示例(如这一个 )非常快，并且非常准确地映射到我的手指位置。我试过一对一地复制这些例子，但要赶上我的手指位置显然有一个滞后。

下面是一个代码沙箱示例在实际设备上测试时有明显的滞后。

信息：

• React使用手势版本：(我尝试了各种版本的组合，没有任何影响，但这是代码框中的配置)

    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-scripts": "4.0.0",
    "react-spring": "9.1.2",
    "react-use-gesture": "9.1.3"

• 设备: IPhone 12 pro
• OS:例如iOS14.5.1
• 浏览器铬

function PullRelease() {
  const [{ x }, api] = useSpring(() => ({ x: 0 }));
  const bind = useDrag(({ movement: [mx], down }) =>
    api.start({ x: down ? mx : 0 })
  );
  return (
    <animated.div {...bind()} style={{ padding: 40, background: "gold", x }}>
      Hello World
    </animated.div>
  );
}

Answer 1

我梳理了一下示例的源代码。事实上，问题是反应-弹簧，我需要提供immediate: true，而触摸是活跃的。

https://codesandbox.io/s/react-spring-gesture-basic-swipe-immediate-6bje9?file=/src/App.js

function PullRelease() {
  const [{ x }, api] = useSpring(() => ({ x: 0 }));
  const bind = useDrag(({ movement: [mx], down }) =>
    api.start({ x: down ? mx : 0, 
        immediate: down // the key line
    })
  );
  return (
    <animated.div {...bind()} style={{ padding: 40, background: "gold", x }}>
      Hello World
    </animated.div>
  );
}