React native - «undefined не объект»?

Question

Хорошо, ухожу с этого ответа React native - «this.setState не является функцией», пытаясь оживить цвет фона? Я просто пытаюсь oop изменить цвет фона представления в React Собственный.

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


  //Set states and hooks
  //To change state 'color' - setColor('#ff0000');
  const colors = ["#fff", "#ff0000", "#00ff00", "#0000ff", "#0077ff"];
  const [color, setColor] = useState("#fff");
  const [backgroundColor, setBackgroundColor] = useState(new Animated.Value(0));
  const [time, setTime] = useState(0);
  //const t = colors[randNum(0, colors.length)];

  //random num, exclusive
  function randNum(min, max) {
    return Math.floor(min + Math.random() * (max - min));
  }

  useEffect(() => {
    setBackgroundColor(new Animated.Value(0));
  }, []); // this will be only called on initial mounting of component,
  // so you can change this as your requirement maybe move this in a function which will be called,
  // you can't directly call setState/useState in render otherwise it will go in a infinite loop.

  useEffect(() => {
    Animated.timing(backgroundColor, {
      toValue: 100,
      duration: 5000
    }).start();
  }, [backgroundColor]);

  var bgColor = this.state.color.interpolate({
    inputRange: [0, 300],
    outputRange: ["rgba(255, 0, 0, 1)", "rgba(0, 255, 0, 1)"]
  });

  useEffect(() => {
    const interval = setInterval(() => {
      //setTime(new Date().getMilliseconds());
      setColor("#ff0000");
    }, 36000);
    return () => clearInterval(interval);
  }, []);

При этом проверяется все, кроме var bgColor = this.state.color, которое создает ошибку.

undefined не является объектом, оценивающим ..

Я не понимаю, почему это проблема, поскольку я установил цвет на useState('#fff') Я хочу использовать color в своей таблице стилей как backgroundColor.

Как я могу установить это правильно?

Answer 1

Если ваш компонент является функцией, вы не должны использовать this.state., но вы должны вызывать непосредственно имя состояния.

В вашем коде:

var bgColor = color.interpolate({...})

вместо :

var bgColor = this.state.color.interpolate({...})

Из реакции DOCS

Состояние чтения

Когда мы хотим отобразить текущий счет в классе мы читаем this.state.count:

<p>You clicked {this.state.count} times</p>

В функции мы можем напрямую использовать count:

<p>You clicked {count} times</p>

Answer 2

В функциональных компонентах вы не обращаетесь к свойствам / переменным состояния компонента с помощью this.state.ab c, вместо этого вы просто используете имя переменной состояния напрямую. Итак, что вам следует сделать:

var bgColor = color.interpolate({
  inputRange: [0, 300],
  outputRange: ['rgba(255, 0, 0, 1)', 'rgba(0, 255, 0, 1)']
});

Answer 3

Вот пример: не создавайте состояние для анимированного значения, вместо этого используйте memo, чтобы инициализировать его один раз и обновить с помощью функции времени

snake: https://snack.expo.io/GwJtJUJA0

код:

export default function App() {
  const { value } = React.useMemo(
    () => ({
      value: new Animated.Value(0),
    }),
    []
  );

  React.useEffect(() => {
    Animated.loop(
      Animated.sequence([
        Animated.timing(value, {
          toValue: 1,
          duration: 1000,
        }),
        Animated.timing(value, {
          toValue: 0,
          duration: 1000,
        })
      ])
    ).start();
  }, []);

  const backgroundColor = value.interpolate({
    inputRange: [0, 1],
    outputRange: ['#0dff4d', '#ff390d'],
  });

  return (
    <View style={styles.container}>
      <Animated.View style={{ width: 200, height: 100, backgroundColor }} />
    </View>
  );
}