缓慢的表现反应使用手势和反应弹簧

Question

像这样的文档中的拖动示例非常快速，并且非常准确地映射到我的手指位置。我试着一对一地复制这些例子，但有一个明显的滞后，无法跟上我的手指位置。

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

信息：

• React Use Gesture版本：(我尝试了各种版本的组合，但没有影响，但这是代码沙盒中的配置(

"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 max
• 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>
);
}