Как я могу запустить анимацию Lottie на componentWillReceiveProps?

Я хотел бы запустить анимацию, когда мой компонент получит обновленную опору.

Образец кода:

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(); на componentWillReceiveProps не работает. Основываясь на нескольких документах, которые я прочитал, я понял, что это, вероятно, неправильный путь, поскольку this на componentWillReceiveProps отличается от this на componentDidMount.

Я попытался передать состояние, чтобы принудительно обновить компонент, но React не обновит компонент анимации.

Предложение, как заставить анимацию воспроизводиться на componentWillReceiveProps


person KD.    schedule 19.08.2017    source источник


Ответы (1)


Попробуйте это в componentDidUpdateвместо этого.

person phoa    schedule 19.08.2017