未定义不是一个对象动画。插值反应原生

Question

我正在研究如何在 React Native 中为颜色设置动画，并遵循本教程 https://codedaily.io/screencasts/8/Animate-Colors-with-React-Native-Interpolate

我所做的只是首先运行react-native init，然后用这个替换我的 App.js 中的代码

import { StyleSheet, View, Text, Animated } from 'react-native';
import React, { Component } from 'react';

export default class App extends Component {

componentDidMount() {
  this.animatedValue = new Animated.Value(0);
}

componentDidMount() {
 Animated.timing(this.animatedValue, {
  toValue: 150,
  duration: 1500
}).start();
}

    render() {
    const interpolateColor = this.animatedValue.interpolate({
      inputRange: [0, 150],
      outputRange: ['rgb(0,0,0)', 'rga(51,250,170)']
    });

    const animatedStyle = {
      backgroundColor: interpolateColor
    }
    return (
      <Animated.View style={[{ width: 50, height: 50 }, animatedStyle]} />
    );
}
}

然后运行react-native run-android

现在我不断收到TypeError:undefined is not an object(evaluating 'this.animatedValue.interpolate')

Answer 1

componentDidMount 生命周期方法仅在第一个 render 之后运行。因此，this.animatedValue 将在组件首次挂载时未定义。

您可以将动画值声明为组件上的实例属性，以便从首次创建组件时就可以使用它。

export default class App extends Component {
  animatedValue = new Animated.Value(0)

  //...
}

此外，您不能像这里那样定义多个componentDidMount 方法。