javascript - 如何在 componentWillReceiveProps 上运行 Lottie 动画？

Question

我想在我的组件收到更新的 Prop 时运行动画。

示例代码:

import React from 'react';
import Animation from 'lottie-react-native';

export default class BasicExample extends React.Component {
  componentDidMount() {
// This works
if(this.props.displayAnimation)
    this.animation.play();
  }

  componentWillReceiveProps(nextProps) {
      console.log("Component will receive new prop")
      if(nextProps.displayAnimation){
         this.animation.play();
      }
   }

  render() {
    return (
      <Animation
        ref={animation => { this.animation = animation; }}
        style={{
          width: 200,
          height: 200,
        }}
        source={require('../path/to/animation.json')}
      />
    );
  }
}

因此 componentWillReceiveProps 上的 this.animation.play(); 不起作用。根据我阅读的几个文档，我意识到这可能不是正确的方法，因为 componentWillReceiveProps 上的 this 与 componentDidMount< 上的 this 不同

我尝试传递一个状态来强制更新组件，但 React 不会更新动画组件。

关于如何在 componentWillReceiveProps 上播放动画的建议

Answer 1

在 componentDidUpdate 中尝试一下。