Возникли проблемы с удалением представлений с экрана при анимации значений React Native - PullRequest
Новая
       18

Возникли проблемы с удалением представлений с экрана при анимации значений React Native

0 голосов
/ 02 августа 2020

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

fadeAnimation(value, target) {
    Animated.timing(target, {
      toValue: value,
      duration: 500
    }).start();
  }


render() {
    const {
      switchButtonsOpacity,
      submitButtonOpacity
    } = this.state;
    const { active, translateX } = tabs;

    if (password !== '' && email !== '') {
      this.fadeAnimation(0, switchButtonsOpacity);
      this.fadeAnimation(1, submitButtonOpacity);
    } else {
      this.fadeAnimation(1, switchButtonsOpacity);
      this.fadeAnimation(0, submitButtonOpacity);
    }

    return (
      <View style={styles.container}>
        <View style={styles.mainContainer}>
          {
             // I tried doing the normal thing ie
             switchButtonsOpacity < 0.01 && (
                <Animated.View style={{ opacity: switchButtonsOpacity }}>
                   <View style={loginSignupStyles.container}>
                     <View style={loginSignupStyles.innerContainer}>
                       <Animated.View style={loginSignupStyles.slider(translateX)} />
                       <TouchableOpacity
                          style={loginSignupStyles.buttonLeft}
                          onLayout={(event) => this.setState({ tabs: { ...tabs, xTabOne: event.nativeEvent.layout.x } })}
                          onPress={() => this.updateSelection({ type: 'login', isLogin: true })}
                       >
                           <Text style={loginSignupStyles.buttonText(active, 'login')}>LOGIN</Text>
                       </TouchableOpacity>
                       <TouchableOpacity
                           style={loginSignupStyles.buttonRight}
                           onLayout={(event) => this.setState({ tabs: { ...tabs, xTabTwo: event.nativeEvent.layout.x } })}
                           onPress={() => this.updateSelection({ type: 'signup', isLogin: false })}
                       >
                           <Text style={loginSignupStyles.buttonText(active, 'signup')}>SIGNUP</Text>
                       </TouchableOpacity>
                    </View>
                  </View>
                </Animated.View>
             )
          }
          
        </View>
      </View>
    )
  }

Есть идеи, как с этим бороться?

...