如何使用react-native动画在一段时间后自动淡出文本

Question

通过使用以下代码，我可以淡入一些文字，

class AnimatedClass extends Component {
   constructor(props) {
      super(props);

      this.state = {fadeIn: new Animated.Value(0),
                    fadeOut: new Animated.Value(1),
                   };
   }

   fadeIn() {
     this.state.fadeIn.setValue(0)                  
     Animated.timing(
       this.state.fadeIn,           
       {
         toValue: 1,                   
         duration: 3000,              
       }
     ).start(() => this.fadeOut());                        
  }

  fadeOut() {
    this.state.fadeOut.setValue(1)
    Animated.timing(                  
       this.state.fadeOut,            
       {
         toValue: 0,                   
         duration: 3000,              
       }
    ).start();                        
  }

  render() {
    return(
       <View style={{flex: 1, backgroundColor: '#efefef'}}>
           <TouchableOpacity 
               onPress={() => this.fadeIn()} 
               style={Styles.submitButtonStyle}
               activeOpacity={0.5}
           >
               <Text style={Styles.submitTextStyle}>Submit</Text>
           </TouchableOpacity>

           <Animated.View                 
              style={{opacity: this.state.fadeIn}}
           >
              <View style={Styles.textContainer}>
                <Text style={{fontSize: 20, textAlign: 'center'}}>Your order has been submitted</Text>
             </View>
           </Animated.View>
       </View>
   );

 }
}

但是，Anyway Text在一段时间后不会自动消失。事实上，我会在文本应该淡出多少秒后设置时间。但它不起作用。

感谢任何帮助。提前致谢。

Answer 1

您基于unseen_prediction = predict_games[feature_names] new_predictions = ada.predict(unseen_prediction) print new_predictions的不透明度，但修改this.state.fadeIn中的this.state.fadeOut。

尝试：

fadeOut()

并且可能会将变量名称更改为fadeOut() { this.state.fadeIn.setValue(1) Animated.timing( this.state.fadeIn, { toValue: 0, duration: 3000, } ).start(); } 或更明确的未来。