React-Native Animated 在 setState 附近不起作用

Question

let animatedHeight = new Animated.Value(50);

const animate = () => {
    animatedHeight.setValue(50);
    Animated.timing(animatedHeight, {
      toValue: 0,
      duration: 200,
      useNativeDriver: true
    }).start();
  };



  const handleSubmit = async (values:ILoginProps) => {
        setLoading(true);

        axios.post('http://127.0.0.1:3333/api/v1/auth/login', values)
        .then(res => {
            console.log(res);
        })
        .catch(err => {
            console.log(err);
            animate();
            setLoading(false);
        })
    
  }

  <Animated.View style={[style.errorContainer, {transform: [{translateY: animatedHeight}]}]}>
     <Text style={style.errorText}>Credentials not found!</Text>
  </Animated.View>

我有这段代码，首先我设置了一个加载状态，然后执行一个动画函数，它运行动画函数来创建动画效果。

当我在 animate() 之前设置了 setLoading(true) 时，动画不会发生。

我真的不知道为什么会这样，也不知道如何解决这个问题

Answer 1

使用 useRef 挂钩包装您的动画值。 React 会在重新渲染后继续跟踪它的值，否则你可能会丢失它。

let animatedHeight = React.useRef(new Animated.Value(50)).current;

React-Native Animated 在 setState 附近不起作用

React-Native Animated does not work near setState

react-native

react-animated