在用户登录页面取决于用户类型后，准备“抽屉导航”菜单

Question

我们正在使用createSwitchNavigator为我们的应用程序创建AppStack和Auth Stack

我们的开关组件看起来像

import React,{Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import { 
     createSwitchNavigator,
     createStackNavigator,
     createAppContainer 
    } from 'react-navigation';
    
import LoginForm from './Forms/LoginForm';
import ShellForm from './Forms/ShellForm';

AuthStack = createStackNavigator({ Login: LoginForm });
AppStack = createStackNavigator({ Shell: ShellForm});

const AppContainer =  createAppContainer(
  createSwitchNavigator(
      {
        App: AppStack,
        Auth: AuthStack,
      },
      {
        initialRouteName: 'Auth',
      }
  ));


export default class RootAppContainer extends React.Component {

  render() {
    return  <AppContainer />
   }
}

然后在外壳中创建动态抽屉式菜单。初始应用将加载Auth Stack，其中包含登录表单和忘记密码。

由于我们是在js加载时将Header中导入ShellForm的，因此它会触发所有const变量并尝试获取菜单。

我们的外壳形式如下

getAppContainer = () =>{
// get menus from we depends on the User logged in 
  var MenuBarInfo = require('../JsonData/Menu.json');
  getMenus({}, getMenuSuccess, getMenuFailure);

  var drawerlist = this.getDrawerListItems(MenuBarInfo.MenuItems)  
  var drawerOptions = {
    contentComponent: MenuComponent,
    initialRouteName:'Home',
    drawerBackgroundColor: 'white',
    drawerWidth: 300,
    navigationOptions: {
      gesturesEnabled: true,
    }

  }

drawer = createDrawerNavigator(
    drawerlist ,
    drawerOptions
  );
  return createAppContainer(drawer);
}

   const DrawerNav = getAppContainer();

由于DrawerNav是一个const变量，因此它尝试准备菜单时可以通过任何方法来避免这种情况，并且避免预先加载。

只有在完成登录后，才有任何方法可以开始呈现ShellForm。