react-native动画的坑

最新推荐文章于 2024-05-09 11:41:25 发布

klabcxy36897

最新推荐文章于 2024-05-09 11:41:25 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： ReactNative 动画

本文链接：https://blog.youkuaiyun.com/klabcxy36897/article/details/76171431

ReactNative 同时被 2 个专栏收录

7 篇文章

订阅专栏

动画

2 篇文章

订阅专栏

在实现一个循环滚动的React-Native动画时，遇到问题。由于将Animated.Image误改为Image并忘记改回，导致在Animated.timing方法中访问this.spinValueOne时报错：'Attempted to assign to readonly property.'。该错误提示表明尝试修改了一个只读属性。解决方案是确保 Animated.timing 对应的组件是Animated组件。

准备做一个循环上下滚动的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.截图:
这里写图片描述