Comment puis-je exécuter l'animation Lottie sur componentWillReceiveProps?

Question

Je voudrais lancer l'animation quand mon composant reçoit un accessoire mis à jour.

Exemple de code:

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')} 
     /> 
    ); 
    } 
} 

Ainsi, le this.animation.play(); sur la componentWillReceiveProps doesnot œuvres. Sur la base de plusieurs documents que j'ai lu ce compris est probablement pas la bonne façon depuis le this sur componentWillReceiveProps est différent de this sur componentDidMount

J'ai essayé passer d'un état à la force de mettre à jour le composant, mais mettre à jour l'habitude de la Réagir composante d'animation.

Suggestion sur la façon de faire le jeu d'animation sur componentWillReceiveProps

Answer 1

Essayez que componentDidUpdate à la place.