React native 在动画期间对本机状态更新作出反应”；“重置”；动画

我面临着一个问题，我试图用很多不同的方法来解决，但我无法让它发挥作用。请参阅此Expo应用程序，我创建了一个愚蠢的示例来演示我的问题：

总之，我想用一个可拖动的组件（示例中的蓝点）构建一个应用程序，但是当用户拖动组件时，我还需要更新应用程序的状态（示例中的计数器）。问题在于，只要在拖动过程中状态更新，组件就会重置到其初始位置。我想允许用户在状态更新发生时自由拖动组件

我可以通过将PanResponder放在一个useRef中来“解决”这个问题，因此在状态更新的情况下它不会被重新初始化，但是正如您在示例中看到的，我希望在PanResponder中使用状态。如果我把它放在useRef中，我就不能使用PanResponder中的状态，因为它将包含一个过时的值（它将始终包含计数器的初始值，即0）

你是如何处理这种情况的？我想有人想在动画中更新状态并不少见，尽管我找不到任何关于这方面的文档或示例

我做错了什么

---

编辑：我正在进一步调查，我可以看到问题是我正在将（dx，dy）值从手势参数映射到位置，但是（dx，dy）值在状态更改时重置为（0,0）。我猜（dx，dy）在创建PanResponder时初始化为（0,0）。仍然不知道如何使其工作…

保存最新计数器状态值的可变ref，以及防止重新初始化PanResponder的ref应解决示例中的问题：

const[counter]=useCounter（）；
//每当计数器状态更改时，更新计数器值ref
const counterValue=useRef（计数器）；
useffect（（）=>{
counterValue.current=计数器；
}，[柜台]；
const position=useRef（新的动画.ValueXY（））；
const panResponder=useRef（panResponder.create({
onStartShouldSetPanResponder:（）=>true，
onPanResponderMove:Animated.event(
[null，{dx:position.current.x，dy:position.current.y}]，
{listener:（）=>console.log（counterValue.current）}//counterValue作为一个ref，不会过时
),
onPanResponderRelease:（）=>{
spring（position.current，{toValue:{x:0，y:0}）.start（）；
}
})
);

您可以在此处查看上述建议：

我理解这是一个相当简单的示例，可能不适用于您的实际用例。如果你能分享更多关于实际使用的细节，那会有帮助的