React Native（动画和 setState）

Posted 2023-03-16

【中文标题】React Native（动画和 setState）

【英文标题】：React Native (Animations and setState)

【发布时间】：2021-05-18 11:33:16

【问题描述】：

我面临一个与使用 setState（功能组件）反应原生动画相关的特定问题，我使用 setInterval 进行了倒计时，并且每一秒我都会创建一个 setState，每当我有一个 setState 时，动画都会重置并重新启动，而我没有不知道为什么，我也在使用这样的 useRef const opacity = new Animated.Value(0) const animatedValueRef = useRef(opacity)，动画是这样循环的（每250毫秒）

        Animated.timing(animatedValueRef.current, 
            toValue: 1,
            duration: 220,
            easing: Easing.ease,
            useNativeDriver: true,
        ).start((event) => 
           if(event.finished) 
               opacity.setValue(0);
               second();
           
        );
    

谢谢！

编辑：这就是我实现倒计时的方式：

    function step1(max, onoff) 

        let intervalId;
        let varCounter = 1;
        setAnimation(true); //animation starts
        irrigation(); //animation call
        let counter = function () 
            if (varCounter < max) 
                varCounter= varCounter + 1;
                setCounter(varCounter + "  " + onoff)
             else 
                clearInterval(intervalId);
                setCounter(" ");
                setAnimation(false);
            
        ;
        intervalId = setInterval(()=>counter(), 1000);
    

（代码需要重构）

【问题讨论】：

你想用你的代码做什么？

我正在尝试从 10 秒到 1 秒倒计时，在此期间我正在制作动画以娱乐（简而言之，我正在将组件从可见切换到不可见（循环））

所以你想让单词从不可见>可见>不可见>可见并且只循环10秒？

显然动画比它应该的更复杂，但总而言之，动画的骨架是这样的......

【参考方案1】：

基本上，每次组件状态发生变化时，组件都会重新渲染。 组件获得更新的状态，React 决定是否应该重新渲染组件。 默认情况下，React 会一直重新渲染所有内容。

【讨论】：

是的，但我应该怎么做才能避免这个问题？非常感谢您的回答

如果组件在发生变化时不需要重新渲染，则不要将其置入状态。您可以在组件中使用 let 声明它们并使用它

不幸的是我需要渲染倒计时..所以我无法删除 setState，我可以编辑问题以向您展示我是如何实现倒计时的

是的，这很棒

我把代码放好了，非常感谢您的耐心等待

【参考方案2】：

您所要做的就是链接您的动画。您的动画值将从 0 变为 1，然后第二个动画将使值从 1 变为 0。您只需在计数器功能中 1 秒后再次启动动画。我建议制作useNativeDriver: false。根本不需要 setState。

    Animated.timing(animatedValueRef.current, 
        toValue: 1,
        duration: 220,
        easing: Easing.ease,
        useNativeDriver: true,
    ).start(() => 
        Animated.timing(animatedValueRef.current, 
          toValue: 0,
          duration: 220,
          easing: Easing.ease,
          useNativeDriver: true,
        ).start(())
    );

【讨论】：

您好，感谢您的回答，我知道这段代码也可以正常工作，但 setState 用于其他用途，我必须使用它，我试过了，但问题没有解决。问题是当我设置状态时动画的重置