在我的一个屏幕中,我有这个警告,我不确定如何解决。
我认为这是由于动画图像背景,因为我注释掉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用于未经检验的组件。我对这个实现做了什么错误?