reactjs - react native StackNavigator initialRouteName

在React Native Navigation库中的'react-navigation'

如何通过AsyncStorage设置StackNavigator initialRouteName？

function getInitialScreen() {
    AsyncStorage.getItem('initialScreen')
        .then(screenName => {
            return (screenName)
                ? screenName
                : 'Login';
        })
        .catch(err => {});
}

const Navigator = StackNavigator({
    Splash: { screen: Splash },
    Login: { screen: Login },
    WebPage: { screen: WebPage }
}, {
    initialRouteName: getInitialScreen()
});

最佳答案

根据您的要求更改具有多个Route的InitialRouteName。我已经用这种方式工作了。

创建router文件导入所有屏幕。

导出一个无状态函数，将其称为createRootNavigator，参数为(load="<Your initial screen>")

export const createRootNavigator = (load="<Your Initial Screen>") => {
  return stackNavigator({
     Initialize: {
       screen: Initialize,
     },
     Main: {
      screen: Main,
     },
     {
       initialRouteName: load
     }
  })
}

在您的主应用中

state = {
  load: "<Your Initial Screen>"
}

例如：

state = {
   load: "Initialize" // value is string
}

在componentDidMount()方法中相应地设置状态。最后渲染新的布局。

render() {
  const Layout = createRootNavigator(this.state.load);
  <Layout />
}

上面的方法对我来说很好。希望它能帮助到别人。