redirect - 如何使用 React Native 自动从启动页面重定向（延迟 2 秒后）到注册页面？

Question

我的 StackNavigator 设置如下：

const Navigation = StackNavigator({
  Splash:{screen: Splash},
  Registration:{screen:Registration},
  HomeScreen:{screen: HomeScreen},
  Login:{screen: Login},
  Lobby:{screen: Lobby},
  Wifi:{screen: Wifi},
  Mobile:{screen:Mobile},

}, {
  mode: 'modal',
  headerMode: 'none'
});

我想在 2 秒后将用户从启动页面（仅包含一个徽标）重定向到注册页面。我想避免使用按钮（因此自动重定向），以便用户简要查看徽标。

我的启动页面：

import React,{Component} from 'react'
import {View, Text, Image, StyleSheet} from 'react-native'
import config from '../components/config/index';
import { StackNavigator, DrawerNavigator } from 'react-navigation';


export default class Splash extends Component{
    render(){
        const logo = config.images.logo;
        const {navigate} = this.props.navigation;
        return(
            <View style={styles.mainContainer}>
                <Image
                    source={logo}
                    style={styles.logo}
                />
            </View>
        );
    }
}

我不确定我会放 this.navigator.redirect('Registration') 因为到目前为止我更改页面的唯一方法是使用 onPress={}

Answer 1

尝试使用 componentDidMount 函数。

import React,{Component} from 'react'
import {View, Text, Image, StyleSheet} from 'react-native'
import config from '../components/config/index';
import { StackNavigator, NavigationActions, DrawerNavigator } from 'react-navigation';
const EntityAction = NavigationActions.reset({
    index: 0,
    actions: [
      NavigationActions.navigate({ routeName: 'screen:Registration' }),
    ]  
});

export default class Splash extends Component{
    componentDidMount {
      setTimeout( () => {this.load()}, 2000);       
    }
    load = () => {
       this.props.navigation.dispatch(EntityAction);    
    }
    render(){
        const logo = config.images.logo;
        const {navigate} = this.props.navigation;
        return(
            <View style={styles.mainContainer}>
                <Image
                    source={logo}
                    style={styles.logo}
                />
            </View>
        );
    }
}