准备做一个循环上下滚动的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组件就会报这种错!