我如何 运行 componentWillReceiveProps 上的 Lottie 动画?
How can i run the Lottie animation on componentWillReceiveProps?
我想 运行 当我的组件收到更新的 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
上播放的建议
在 componentDidUpdate
中试试。
我想 运行 当我的组件收到更新的 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
在 componentDidUpdate
中试试。