React Native - как повторно отображать компонент каждые x миллисекунд? "this.setState не является функцией?"

Question

Хорошо, я пытаюсь обновлять свойства и / или текст компонента каждые x миллисекунд. Я нырнул в https://www.npmjs.com/package/react-interval-renderer и тому подобное, однако у меня есть ошибки, относящиеся к s.

Теперь я смотрю просто на react native (IOS). как обновить дату валютирования (миллисекунды) , однако у меня возникли проблемы с форматированием этого в моем файле.

У меня есть:

export default props => {
  let [fontsLoaded] = useFonts({
    'Inter-SemiBoldItalic': 'https://rsms.me/inter/font-files/Inter-SemiBoldItalic.otf?v=3.12',
  });

  this.state ={
   color: "#fff",
   colorAnimTime: 36000,
   time: 0
  }

    setInterval(() => {
      this.setState({
        time: new Date().getMilliseconds()
      });
    }, 1000);


//------------------------------------------------------------------->
  if (!fontsLoaded) {
    return <AppLoading />;
  } else {

    const styles = StyleSheet.create({
      container: { flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
    },
      textWrapper: {
        height: hp('70%'), // 70% of height device screen
        width: wp('80%'),   // 80% of width device screen
        justifyContent: 'center',
        alignItems: 'center',
      },
      myText: {
        fontSize: hp('5.5%'), // End result looks like the provided UI mockup
        fontFamily: 'SequelSans-BlackDisp'
      }
    });

      return (
        <AnimatedBackgroundColorView
        color='#00acdd'
        delay={0.5}
        duration={36000}
        initialColor={this.state.color}
        style={styles.container}>
          <View style={styles.textWrapper}>
            <Text style={styles.myText}>COLOR</Text>
          </View>
        </AnimatedBackgroundColorView>
      );
  }

В указанном ответе используется componentDidMount() {, чтобы заключить setInterval, однако я получаю синтаксические ошибки, если помещаю это туда, где сейчас есть setInterval

Теперь я получаю

this.setState не является функцией

И попытался привязать setInterval вправо this, но я считаю, что не понимаю, как настроить мой файл.

Через 1000 мс я хочу изменить «цвет» моего файла. <AnimatedBackgroundColorView> и просто перезагрузите компонент. (так что он снова анимируется - https://www.npmjs.com/package/react-native-animated-background-color-view)

Как я могу это сделать?

Answer 1

Ваш компонент написан как функциональный компонент, а не как класс. Чтобы создать функциональный компонент с отслеживанием состояния, вам нужно использовать ловушку setState. Вы получаете эту ошибку, поскольку у компонента нет свойства объекта setState или this. Вы также захотите использовать хук useEffect для установки интервала.

https://reactjs.org/docs/hooks-reference.html

import React, { useState } from 'react';

export default props => {
  let [fontsLoaded] = useFonts({
    'Inter-SemiBoldItalic': 'https://rsms.me/inter/font-files/Inter-SemiBoldItalic.otf?v=3.12',
  });

  const color = "#fff";
  const colorAnimTime = 36000;
  const [time, setTime] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(new Date().getMilliseconds));
    }, 1000);
    return () => clearInterval(interval);
  }, []);


//------------------------------------------------------------------->