所以基本上我试图让这个渲染函数实际实时更新值(到目前为止,它只是在动画完成后跳转到最终值)
this.state = {
pleaseDisplayMe: Animated.value(0);
}
triggerAnimation(){
Animated.timing(
this.state.pleaseDisplayMe,
{toValue: 100,
duration: 5000}
).start();
}
render(){
return <Animated.Text>{this.state.pleaseDisplayMe}</Animated.Text>
}
我觉得因为这个库可以在底层对值进行动画处理,所以必须有一种方法来显示正在发生的事情。或者我可以通过样式输入某种内容/值属性吗?
我尝试自定义编写自己的 setInterval 函数,但我需要它与其他动画的计时更好地保持一致,并且我很想访问 RN 的 Easing 库!
谢谢!
最佳答案
React Native 有 timers您可以使用。例如,要使用 setInterval 执行您想要完成的操作:
state = {pleaseDisplayMe: 0}
componentDidMount() {
setInterval(() => {
this.setState({pleaseDisplayMe: this.state.pleaseDisplayMe + 1})
}, 1000);
}
render() {
return (
<Text>{this.state.pleaseDisplayMe}</Text>
)
}
但是,如果您尝试实际从动画中获取值,则应该将监听器附加到 Animated 并从那里获取值 there is no way to synchronously read the value because it might be driven natively 。一个可能非常糟糕的例子(我也是 React Native 的新手)是这样的:
state = {
pleaseDisplayMe: new Animated.Value(0),
value: 0,
}
triggerAnimation(){
this.state.pleaseDisplayMe.addListener(({value}) => this.setState({value: value}));
Animated.timing(
this.state.pleaseDisplayMe,
{toValue: 100,
duration: 5000}
).start();
}
render() {
return (
<Text>{this.state.value}</Text>
)
}
关于reactjs - 尝试对 React Native 文本值进行动画处理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42150035/