Question

我是React-Native应用程序开发的新手。
https://snack.expo.io/RjmfLhFYg
我试图了解如果取消对链接的博览会小吃中的第11行setTest(false)的注释，为什么动画会停止工作。

谢谢！

相关代码副本：

export default function App() {
  const element1 = useRef(new Animated.ValueXY()).current;
  const element2 = new Animated.ValueXY();
  const [test, setTest] = useState(true);

  useEffect(() => {
    // setTest(false);

    setTimeout(() => {
      Animated.spring(
        element2,
        {
          toValue: {x: -10, y: -100},
          useNativeDriver: true
        }
      ).start();
    }, 2000);
  }, []);

  return (
    <View style={styles.container}>
      <Animated.View
        style={[styles.element, {backgroundColor: "blue"}, {
          transform: [
            {translateX: element2.x}, {translateY: element2.y}
          ]
        }]}>
      </Animated.View>
      <Animated.View
        style={[styles.element, {backgroundColor: "red"}, {
          transform: [{translateX: element1.x}, {translateY: element1.y}]
        }]}
        >
      </Animated.View>
    </View>
  );
}

Answer 1

useState docs

setState函数用于更新状态。它接受一个新的状态值并排队重新呈现该组件。

请记住，当您更改组件的状态时，它会导致“重新渲染”，因此您的element2变量将恢复为其初始值。要解决此问题，就像对element1一样，使用element2变量上的“ useRef”钩子。

const element2 = useRef(new Animated.ValueXY()).current;

“ useRef”挂钩将使变量在组件的整个生命周期中持久存在，因此如果重新渲染组件，则不会受到影响

useRef docs

useRef返回一个可变的ref对象，该对象的.current属性被初始化为传递的参数（initialValue）。返回的对象将在组件的整个生命周期中保持不变。

动画和状态问题：在useEffect中使用Animated.spring

相关代码副本：

1 个答案: