淡出反应中的飞溅屏幕

Question

以下是我的代码，我尝试淡入图像，然后淡出淡出后，转到登录页面。

它转到登录页面，但动画不起作用。

图像来了，等待立即消失。我做错了什么？

state={
        fadeAmin: new Animated.Value(0),
    }
    componentDidMount() {
        this.setState({ fadeAnim: new Animated.Value(1) },
        () => {
          Animated.timing(          // Animate over time
            this.state.fadeAnim, // The animated value to drive
            {
              toValue: 0,           // Animate to opacity: 1 (opaque)
              duration: 2000,
            }
          ).start();
        })            
    }
    componentWillMount() {
     setInterval(() => {
       this.props.navigation.navigate('login');
     },2000) // Starts the animation
  }
    render() {
      let { fadeAnim } = this.state;     
      console.log('props', this.props)
        return (
          <View style = {{flex:1 , alignItems:"center", justifyContent:'center'}}>
          <Login navigation={this.props.navigation}/>
            <Animated.View style={{ ...this.props.style, opacity: fadeAnim }} >
            {this.props.children}
              <Image style= {styles.logo} source={require('../../image/dataLogo.jpeg')} />           
            </Animated.View>
          </View>
        );      
    }
  }

Answer 1

如果我正确理解了您，则在您要导航到登录屏幕后，在这种情况下，我猜想问题是使用生命周期方法。因此，componentWillMount在componentDidMount之前打电话，现在即使您对Settimeout（您真的不需要）进行了淡出的时间，因为您的淡出动画。因此，要解决此问题，我建议删除componentWillMount并在componentDidMount中执行所有逻辑。start接听回电，动画完成后将被调用，您可以借此机会在任何需要的地方导航。另外，如果您需要额外的时间，请添加setTimeout，然后导航。

componentDidMount() {
    Animated.timing(          // Animate over time
      this.fadeAnim, // The animated value to drive
      {
        toValue: 0,           // Animate to opacity: 1 (opaque)
        duration: 2000,
      }
    ).start(() => {
      console.log('fading out');
      // this.props.navigation.navigate('login');
      /* setTimeout(() => {
        this.fadeOut();
      }, 2000); */
    });
  }

示例，https://snack.expo.io/skfnm_x8e