2017-08-19 11 views
0

私のコンポーネントが更新された小道具を受け取ったときにアニメーションを実行したいと思います。componentWillReceivePropsでLottieアニメーションを実行するにはどうすればよいですか?

サンプルコード:componentWillReceiveProps doesnotの作品に

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();。これはおそらくcomponentWillReceivePropsthiscomponentDidMount

this異なっているので、正しい方法ではありません実現し、私は読んでいくつかのドキュメントに基づいて、私はコンポーネントを更新したが文句を言わないアニメーションのコンポーネントを更新リアクトを強制的に状態を渡してみました。 componentWillReceiveProps

答えて

1

にアニメーションの再生を作成する方法について

提案代わりcomponentDidUpdateのそれを試してみてください。

+0

ありがとうございました。それはうまくいった。 –

関連する問題