React Native не обновляет состояние

Я пишу простую анимацию и пытаюсь сбросить ее после завершения

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.info('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 всегда равен 430 (за исключением первой итерации) в cycleAnimation, несмотря на вызов setLeftPos с новым значением 0. Также попытался поместить cycleAnimation в обратный вызов setLeftPos, но получил тот же результат.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
112
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы неправильно его сбрасываете. Не нужно обновлять состояние, попробуйте следующее:

leftPos.setValue(0);

Поместите свою функцию внутрь 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.info("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: {},
});

Другие вопросы по теме