我想在我的组件收到更新的道具时运行动画。
示例代码:
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')}
/>
);
}
}
所以 this.animation.play();
oncomponentWillReceiveProps
不起作用。根据我阅读的几份文件,我意识到这可能不是正确的方法,因为this
on与oncomponentWillReceiveProps
不同this
componentDidMount
我尝试传递一个状态来强制更新组件,但 React 不会更新 Animation 组件。
关于如何使动画播放的建议componentWillReceiveProps