在 react-native 中设置动态 'initialRouteName'

Question

问题很简单，我知道同一个问题有很多答案，但我设置了自己的 App.js 文件，我几乎尝试了所有但没有成功。

所以我的App.js 看起来像这样

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  StatusBar
} from 'react-native';
import { createStackNavigator  } from 'react-navigation';
import { Header, Button, Spinner } from './src/components/comman';
import SplashScreen from 'react-native-splash-screen';
import LoginForm from './src/components/LoginForm';
import SignupForm from './src/components/SignupForm';
import Home from './src/components/Home';
import ForgetPassword from './src/components/ForgetPassword';


import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
const App = createStackNavigator ({
  Login: { screen: LoginForm },
  Home: { screen: Home },
  Signup: { screen: SignupForm },
  ForgetPassword: { screen : ForgetPassword },
  },
  { 
  initialRouteName: 'Login',
  });

export default App;

现在我将登录状态存储在AsyncStorage 我的LoginForm.js 中，就像这样

.
.
AsyncStorage.setItem('isLoggedIn', 'true').then((a) => {
    this.onLoginSuccess(responseData.user_id);
});
.
.

所以现在我想根据我的本地存储元素设置initialRouteName。 简单如果isLoggedIn 是true 然后initialRouteName : Home 否则initialRouteName : Login

简单但不知道如何在my App.js 中使用它

请帮忙:)

Answer 1

如你所见here:

如果您需要将 initialRouteName 设置为道具，那是因为在呈现应用导航之前需要异步获取一些数据。处理此问题的另一种方法是使用 switchnavigator 并在获取异步数据时显示一个屏幕，然后在必要时使用参数导航到适当的初始路由。有关完整示例，请参阅 docs。

这是一个开放的RFC

更新

看看here。

你会发现更多的描述！

Answer 2

你可以这样写

 <Stack.Navigator
  {...{initialRouteName: isLoggedIn ? 'Home' : 'Login'}}>
  <Stack.Screen name="Login" component={LoginScreen} />
  <Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>