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

在本机中淡出启动画面

1 个答案: