导致警告“只能更新已安装或安装组件”的动画图像

时间:2018-02-15 22:56:40

标签: reactjs react-native

在我的一个屏幕中,我有这个警告,我不确定如何解决。

enter image description here

我认为这是由于动画图像背景,因为我注释掉animated.timing()功能警告消失了

我首先在构造函数中初始化图像源和动画值,如下所示:

this.backgroundImage = require('../assets/images/graidenttPastel.jpg'); 
this.backgroundImageWidth = resolveAssetSource(this.backgroundImage).width;
this.translateXValue1 = new Animated.Value(-1);
this.translateXValue2 = new Animated.Value(0);
this.animationLength = 20000;

我使用了Animated.timing函数,如下所示:

 translateXFirstHalfLoop() {
    var phoneWidth = Dimensions.get('window').width;
    this.translateXValue1.setValue(-1);
    this.setState({translateXValue2Offset: this.backgroundImageWidth});
    Animated.timing(
      this.translateXValue1,
      {
        toValue: -this.backgroundImageWidth,
        duration: this.animationLength/2,
        easing: Easing.linear
      }
    ).start(()=>this.translateXSecondHalfLoop())
  }


  translateXSecondHalfLoop() {
    this.translateXValue1.setValue(this.backgroundImageWidth);
    this.setState({translateXValue2Offset: -this.backgroundImageWidth});
    Animated.timing(
      this.translateXValue1,
      {
        toValue: 0,
        duration: this.animationLength/2,
        easing: Easing.linear
      }
    ).start(()=>this.translateXFirstHalfLoop())
  }

然后我调用了componentDidMount():'

中的函数
componentDidMount() {
    this.translateXFirstHalfLoop()
}

我的render()方法:

  render() {
    this.translateXValue2 = Animated.add(this.translateXValue1, this.backgroundImageWidth);

    return (
      <SafeAreaView
        style={[{backgroundColor: THEME_COLOR, flex: 1}]}
        forceInset={{ bottom: 'never' }}>
        <Animated.Image
          style={{
            position: 'absolute',
            left: this.translateXValue1,
             }}
          resizestate={Image.resizeMode.cover}
          source={this.backgroundImage}
        />
        <Animated.Image
          style={{
            position: 'absolute',
            left: this.translateXValue2,
             }}
          resizestate={Image.resizeMode.cover}
          source={this.backgroundImage}
        />
        ...

我已经按照教程设置了动画组件,我没有调用setState,replaceState用于未经检验的组件。我对这个实现做了什么错误?

0 个答案:

没有答案
相关问题