[英]Display Animated Value in React Native Render Text Component
我无法在渲染器上显示动画的值并返回此错误。
不变违规:对象作为 React 子对象无效(找到:带有键 {value} 的对象)。 如果您打算渲染一组子项,请改用数组。
当然,我在console
看到了 Value
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>
);
}
提供给addListener
的函数将使用一个以value
键作为参数的对象调用,因此不要使用整个对象设置progress
,而是使用该value
:
this.animatedValue.addListener((progress) => {
this.setState({ progress: progress.value });
});
如果动画值变化不大,Tholle 解决方案就可以正常工作,因为每次值变化时它都会导致组件重新渲染(正如@saeedZhiany 在他的评论中提到的那样),这可能会导致性能问题。
对于这些情况的更好的解决方案是使用._value
财产animatedValue
,是这样的:
<Text>
{Math.round(this.animatedValue._value)}
</Text>
这样你就可以在不更新组件状态的情况下随时获得真正的价值。 从而避免性能问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.