React Native 不更新状态

Question

我正在编写一个简单的动画并尝试在完成后重置它

import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Image, Animated, Easing } from 'react-native';

export default function App() {
  const [leftPos, setLeftPos] = useState(new Animated.Value(0))

  useEffect(() => {
    cycleAnimation()
  }, []);

  const cycleAnimation = () => {
    console.log('STARTING ANIMATION:', leftPos)
    Animated.sequence([
      Animated.timing(
        leftPos,
        {
          toValue: 430,
          duration: 3000,
          easing: Easing.linear,
          useNativeDriver: false
        }
      )
    ]).start(() => {
      setLeftPos(new Animated.Value(0))
      cycleAnimation()
    })
  }


  return (
    <View style={{ backgroundColor: 'black', flex: 1 }}>

      <Animated.View style={{ left: leftPos }}>
        <Image
          style={styles.cloud}
          source={require('./assets/cloud.png')}
        />
      </Animated.View>

    </View >
  );
}

const styles = StyleSheet.create({
  cloud: {

  }
});

leftPos 在 cycleAnimation 中始终为 430（第一次迭代除外），尽管使用新的 0 值调用 setLeftPos。也尝试将 cycleAnimation 放在 setLeftPos 的回调中，但得到了相同的结果。

Answer 1

您重置不正确。无需更新状态，试试这个：

leftPos.setValue(0);

Answer 2

将你的函数放在 useEffect 中

import React, { useState, useEffect } from "react";
import { StyleSheet, View, Image, Animated, Easing } from "react-native";

export default function App() {
  const [leftPos, setLeftPos] = useState(new Animated.Value(0));

  useEffect(() => {
    const cycleAnimation = () => {
      console.log("STARTING ANIMATION:", leftPos);
      Animated.sequence([
        Animated.timing(leftPos, {
          toValue: 430,
          duration: 3000,
          easing: Easing.linear,
          useNativeDriver: false,
        }),
      ]).start(() => {
        setLeftPos(new Animated.Value(0));
      });
    };
    cycleAnimation();
  }, [leftPos]);

  return (
    <View style={{ backgroundColor: "black", flex: 1 }}>
      <Animated.View style={{ left: leftPos }}>
        <Image style={styles.cloud} source={require("./assets/icon.png")} />
      </Animated.View>
    </View>
  );
}

const styles = StyleSheet.create({
  cloud: {},
});

React Native 不更新状态

React Native doesn't update state

animation

hybrid-mobile-app

reactjs

react-native