Реагируйте на собственный экран-заставку и перейдите на другой экран

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()
    )
  }
}