Отключить анимацию в условиях в React Native

Question

Я сделал экран (я называю это «S1») с видом, который переводят справа налево.Это отлично работает.Так как это представление используется в одном и том же месте на разных экранах для навигации между экранами, я бы хотел отключать анимацию каждый раз, когда это представление необходимо воссоздать на других экранах или S1.

Я передаю параметр needToAnimateна каждом экране, и значение всегда хорошее.

Я уже пробовал разные решения: - Я инкапсулирую свое представление либо в a, либо в соответствии с needToAnimate, но только создается, и я не могу понять, почему,- Я также пытаюсь изменить значение начального marginLeft, всегда в соответствии с needToAnimate, но значение всегда одинаково.

Так вы можете мне помочь?

Вот мой код

  animatedMarginLeft = this.needToAnimate
? new Animated.Value(screenWidth() - 240)
: new Animated.Value(17);

componentDidMount() {
Animated.timing(this.animatedMarginLeft, {
  toValue: 17,
  duration: 300,
  easing: Easing.linear
}).start();
}

public render() {
console.log(this.needToAnimate);
const leftMenu = this.getleftMenu();

return (
  <View style={styles.container}>
    <Animated.View
      style={[
        styles.animation_view,
        { marginLeft: this.animatedMarginLeft }
      ]}
    >
      <MyObject/>
    </Animated.View>

....

Answer 1

Проблема решена.

Проблема возникла из переменной needToAnimate, которая была определена параметром навигации

  needToAnimate = this.props.navigation.getParam("animate", true);

Но это рассматривалось не как логическое значение, а как строка.Таким образом, журнал needToAnimate может отображать значение false, но условие if (this.needToAnimate) всегда было истинным.

Answer 2

Вы пытаетесь анимировать только при определенных условиях?

Если это так, у вас должно быть условие в componentDidMount, например:

componentDidMount(){

    if(needToAnimate){

        Animated.timing(this.animatedMarginLeft, {
            toValue: 17,
            duration: 300,
            easing: Easing.linear
        }).start();
    }
}