在动画“重置"期间反应本机状态更新.动画 [英] React Native state update during animation "resets" the animation

问题描述

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

I am facing a problem that I've tried to solve in lots of different ways, but I cannot get it to work. Please see this Expo application, I've created a dumb example that demonstrates my problem: https://snack.expo.io/HJB0sE4jS

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

To summarize, I want to build an app with a draggable component (The blue dot in the example), but while the user drags the component I also need to update the state of the app (the counter in the example). The problem is that whenever the state updates during dragging, the component resets to it's initial position. I want to allow the user to freely drag the component while state updates happen.

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

I was able to "solve" the issue by putting the PanResponder in a useRef, so it won't be reinitialized in case of a state update, but as you can see in the example, I want to use the state in the PanResponder. If I put it in a useRef I cannot use the state in the PanResponder because it will contain a stale value (it will always contain the initial value of the counter which is 0).

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

How do you handle these kind of situations in react native? I guess it is not too uncommon that someone wants to update the state during an animation, although I cannot find any documentation or examples on this.

我在做什么错了?

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

I was investigating further and I can see that the problem is that I'm mapping the (dx,dy) values from the gesture parameter to the position, but the (dx,dy) values are reset to (0,0) when the state changes. I guess (dx,dy) initialized to (0,0) when PanResponder is created. Still don't know what to do to make this work...

推荐答案

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

A mutable ref that holds the latest counter state value, along with a ref to prevent re-initializing the PanResponder should solve the problem in the example:

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

You can check the above suggestion here: https://snack.expo.io/rkMLgp4jB

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

I understand though that this is a rather simplified example, and may not work for your actual use-case. It would help if you could share some more details on the actual usage!

这篇关于在动画“重置"期间反应本机状态更新.动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！