Wie kann ich die Lottie-Animation auf componentWillReceiveProps ausführen?

Question

Ich möchte die Animation ausführen, wenn meine Komponente eine aktualisierte Requisite erhält.

Beispielcode:

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

So ist die this.animation.play(); auf dem componentWillReceiveProps doesnot funktioniert. Basierend auf mehreren Dokumenten las ich erkannte dies wahrscheinlich nicht der richtige Weg ist, da die this auf componentWillReceiveProps unterscheidet sich von this auf componentDidMount

Ich habe versucht, einen Staat, um die Komponente zu zwingen zu aktualisieren, aber React pflegt die Animations Komponente aktualisieren.

Vorschlag, wie die Animation Spiel machen auf componentWillReceiveProps

Answer 1

bereiten in componentDidUpdate statt.