想要进行动画阵营本地文本价值
问题描述:
所以基本上即时试图让这个渲染功能实际上实时更新的价值(截至目前它只是在动画完成后跳转到最终值)想要进行动画阵营本地文本价值
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的缓动库!
谢谢!
答
React Native有timers您可以使用。例如,你试图用setInterval来逐步实现的目标:
state = {pleaseDisplayMe: 0}
componentDidMount() {
setInterval(() => {
this.setState({pleaseDisplayMe: this.state.pleaseDisplayMe + 1})
}, 1000);
}
render() {
return (
<Text>{this.state.pleaseDisplayMe}</Text>
)
}
但是,如果你想,而不是试图真正得到从动画中的价值,你应该附加一个侦听动画,并获得价值从那里作为there is no way to synchronously read the value because it might be driven natively。一个可能非常差(我也有新的反应母语)的这个例子是这样的:
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>
)
}
请注意,每当triggerAnimation获取callen时,您都会绑定一个新的侦听器。你并没有移除听众。感谢队友 –
,这完全有帮助!事实证明,只要有监听器更新状态就会强制以我需要的方式进行动态重新渲染,所以实际上我只能在侦听器中使用this.state.forceUpdate()方法。 帮助非常感谢! – Jeremy