反应原生闪屏并导航到不同的屏幕

Question

我是使用 React Native 的初学者。 我想为我的应用程序显示启动画面（1 秒）并导航到不同的屏幕。 我已经按照并结合了一些教程，但出现了错误。

我的代码是这样的：

class SplashScreen extends React.Component {
    static navigationOptions = {header: null,}
    constructor(props){
        super(props);
        this.state = {
            timePassed: false
        };
    }

    render() {
        let that = this;
        setTimeout(function(){that.setState({timePassed: true})}, 1000);
        const { navigate } = this.props.navigation; 

        if (!this.state.timePassed){
           return (
          <View style={styles.splashContainer}>
              <Image source={require('./image/splash_screen.png')} style=
              {styles.splash} />
          </View>
        );
    }
    else{
        () => navigate('Login'); 
    }

}

导航到新屏幕时出错。 谁能帮我？还是有更好的解决方案？ 谢谢。

Answer 1

试试这个

class SplashScene extends Component {
  function timeout(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

  async function sleep(fn, ...args) {
    await timeout(3000);
    return fn(...args);
  }

  resetAndNavigate() {
    const resetAction = NavigationActions.reset({
      index: 0,
      actions: [
        NavigationActions.navigate({ routeName: 'Login'})
      ]
    })
    this.props.navigation.dispatch(resetAction)
  }
  componentDidMount() {
    sleep.then(
      this.resetAndNavigate()
    )
  }
}