Question

我遇到了一个尝试以多种不同方式解决的问题，但是我无法使其正常工作。请参阅此Expo应用程序，我创建了一个愚蠢的示例来演示我的问题：https://snack.expo.io/HJB0sE4jS

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

我能够通过将PanResponder放在useRef中来“解决”该问题，因此在状态更新的情况下不会将其重新初始化，但是如您在示例中所看到的，我想在PanResponder。如果我将其放在useRef中，则我将无法使用PanResponder中的状态，因为它将包含一个过时的值（它将始终包含计数器的初始值为0）。

您如何在本机反应中处理这类情况？我想有人在动画过程中更新状态并不罕见，尽管我找不到任何文档或示例。

我在做什么错了？

编辑：我正在进一步调查，可以看到问题是我正在将（dx，dy）值从手势参数映射到位置，但（dx，dy）值重置为（0 ，0）状态改变时。我猜创建PanResponder时（dx，dy）初始化为（0,0）。仍然不知道该怎么做才能使这项工作...

Answer 1

具有最新计数器状态值的可变引用以及防止重新初始化PanResponder的引用应该可以解决示例中的问题：

const [counter] = useCounter();

// Update the counterValue ref whenever the counter state changes
const counterValue = useRef(counter);
useEffect(() => {
  counterValue.current = counter;
}, [counter]);

const position = useRef(new Animated.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 being a ref, will not go stale
    ),
    onPanResponderRelease: () => {
        Animated.spring(position.current, { toValue: { x: 0, y: 0 } }).start();
    }
  })
);

您可以在此处查看以上建议：https://snack.expo.io/rkMLgp4jB

我知道这是一个相当简化的示例，可能不适用于您的实际用例。如果您可以共享更多有关实际用法的详细信息，将会有所帮助！

在动画期间反应本机状态更新“重置”动画

1 个答案: