我无法在“渲染”上显示“动画值”并返回此错误。
不变违规:对象作为React子对象无效(找到:键为{value}的对象)。如果要渲染子级集合,请改用数组。
当然,我在console
constructor(props) {
super(props);
this.state={
progress:0
}
this.animatedValue = new Animated.Value(0);
this.animatedValue.addListener((progress) => {
this.setState({progress})
});
}
componentDidMount() {
this.animate()
}
animate() {
this.animatedValue.setValue(0);
Animated.timing(
this.animatedValue,
{
toValue: 1,
duration: 15000,
easing: Easing.linear
}
).start()
}
render() {
return(
<View>
<Text> {this.state.progress} </Text>
</View>
);
}
答案 0 :(得分:5)
将使用带有addListener
键作为参数的对象来调用赋予value
的函数,因此,使用progress
而不是对整个对象设置value
代替:
this.animatedValue.addListener((progress) => {
this.setState({ progress: progress.value });
});
答案 1 :(得分:1)
如果动画值变化不大,Tholle解决方案效果很好,因为每次更改值时,都会导致组件重新渲染(如@saeedZhiany在其评论中所述),这可能会导致性能问题。
针对这些情况的更好解决方案是使用._value
的{{1}}属性,如下所示:
animatedValue
这样,您可以随时获取实际值,而无需更新组件状态。从而避免性能问题。