react-native动画的坑

前端之家收集整理的这篇文章主要介绍了react-native动画的坑前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

准备做一个循环上下滚动的react-native动画,但是遇到了坑.我在调试的过程中把Animated.Image改成了Image,然后忘了改过来:
spinAniamte = ()=> {
if (this.animateToValue >= carmaHeight){
this.animateToValue = 0;
} else {
this.animateToValue = carmaHeight;
}
Animated.timing( // 随时间变化而执行的动画类型
this.spinValueOne,// 动画中的变量值
{
toValue: this.animateToValue,// 透明度最终变为1,即完全不透明
duration:2000,
}
).start((finished)=>{
return this.spinAniamte();
});
}

componentDidMount() {
  this.spinAniamte();
}

  render(){
      return (
        <View style={{flex:1,justifyContent:'center'}}>
            <Image  capInsets={{top:20,right:20,left:20,bottom:20}} source={{uri:'scan_border'}} style={{alignItems:'center',position:"absolute",left:carmaLeft,right:carmaLeft,height:carmaHeight}} resizeMode={'stretch'}>
                <Image source={{uri:'scanLine'}} style={{position:"absolute",top:this.spinValueOne,height:7,width:200}}></Animated.Image>
            </Image>
        </View>
    );
}

结果到Animated.timing方法里面去访问 this.spinValueOne会一直报错:
Attempted to assign to readonly property.截图:

如果Animated.timing,没有对应的Animated组件就会报这种错!

猜你在找的React相关文章