Как изменить время React Native Animated sequence при получении реквизита

Question

У меня есть циклическая анимация, которую я хочу, чтобы пользователь мог изменять время. Используя редукс, я настроил его так, чтобы анимированный компонент получал новые тайминги в качестве реквизита, когда пользователь изменяет их в настройках. Однако это не меняет время последовательности (я предполагаю, что это потому, что последовательность присваивает значения переменной, а не ссылается на значение переменной, которая изменяется)

class BreatheCircle extends React.Component {
      state = {
            circleAnimation: new Animated.Value(0.6),
            holdAnimation: new Animated.Value(0),
            inhaleAnimation: new Animated.Value(0),
            exhaleAnimation: new Animated.Value(0),
        }
        componentWillReceiveProps(nextProps){
          console.log('next props:', nextProps)
        }

breathAnimation = 
    Animated.loop(
      Animated.sequence([
      Animated.timing(this.state.inhaleAnimation, {toValue: 1, duration:10}),
      Animated.timing(this.state.circleAnimation, {toValue: 1, duration:this.props.in*1000}),
      Animated.timing(this.state.inhaleAnimation, {toValue: 0, duration:10}),
      Animated.timing(this.state.holdAnimation, {toValue: 1, duration:10}),
      Animated.timing(this.state.holdAnimation, {toValue: 0, duration:10, delay: this.props.hold*1000}), //delay for the hold to disappear
      Animated.timing(this.state.exhaleAnimation, {toValue: 1, duration:10}),
      Animated.timing(this.state.circleAnimation, {toValue: 0.6, duration:this.props.out*1000}),
      Animated.timing(this.state.exhaleAnimation, {toValue: 0, duration:10}),
]))


componentDidMount(){
  // this.state.animated.setValue(0.6) // state already declare
  this.animateCircle();
}
componentWillUnmount(){
  this.breathAnimation.stop();
}

animateCircle(){
    this.breathAnimation.start();
}


  render(){
    const{animated} = this.state;
    return(
        <View style={{alignItems: 'center'}}>
        <Animated.View style={{
          width: 350,
          height: 350,
          borderRadius: 200,
          transform: [ {scale: this.state.circleAnimation} ]
        }}>
          <LinearGradient colors={['rgb(255, 206, 224)', 'rgb(248, 120, 131)']} style={{ alignItems: 'center', justifyContent: 'center', flex: 1, borderRadius: 200}}>
            <Animated.Text style={{
              position: 'absolute',
              justifyContent: 'center',
              fontSize: 80,
              fontWeight: 'bold',
              color: 'white',
              opacity: this.state.holdAnimation.interpolate({
                inputRange: [0, 1],
                outputRange: [0, 1],
                extrapolate: 'clamp',
                                },)
                              }}>Hold</Animated.Text>
            <Animated.Text style={{
              position: 'absolute',
              justifyContent: 'center',
              fontSize: 80,
              fontWeight: 'bold',
              color: 'white',
              opacity: this.state.inhaleAnimation.interpolate({
                inputRange: [0, 1],
                outputRange: [0, 1],
                extrapolate: 'clamp',
                                },)
                              }}>Inhale</Animated.Text>
            <Animated.Text style={{
              position: 'absolute',
              justifyContent: 'center',
              fontSize: 80,
              fontWeight: 'bold',
              color: 'white',
              opacity: this.state.exhaleAnimation.interpolate({
                inputRange: [0, 1],
                outputRange: [0, 1],
                extrapolate: 'clamp',
                                },)
                              }}>Exhale</Animated.Text>
          </LinearGradient>
        </Animated.View>
      </View>
    )
  }
}

const mapStateToProps = state => {
  return {
    in: state.in,
    hold: state.hold,
    out: state.out,
  };
};

  export default connect(
    mapStateToProps
  )(BreatheCircle);

Как бы я изменил время, когда ему будут переданы новые реквизиты?

Answer 1

Я предлагаю вам использовать метод жизненного цикла componentDidUpdate: если твой mapStateToProps работает правильно, вы можете просто обновить состояние вашего компонента следующим образом:

componentDidUpdate(previousProps, previousState) {
  if (this.props !== previousProps){
    this.setState({
      ... // update your component state with the props you passed here
    })
  }
}

Вот док