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

时间:2019-11-09 14:06:55

标签: react-native animation react-hooks

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

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

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

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

我在做什么错了?

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

1 个答案:

答案 0 :(得分:0)

具有最新计数器状态值的可变引用以及防止重新初始化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

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