reactjs - 尝试对 React Native 文本值进行动画处理

Question

所以基本上我试图让这个渲染函数实际实时更新值(到目前为止，它只是在动画完成后跳转到最终值)

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 库!

谢谢!

Answer 1

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>
  )
}