Мы создаем AppStack и Auth Stack для нашего приложения, используя createSwitchNavigator
наш компонент коммутатора выглядит как
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, где у нас есть форма входа и Забыл пароль.
Поскольку мы импортировали ShellForm в заголовок при загрузке js, оно запускает все переменные 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 является константной переменной, она пытается подготовить меню, есть ли способ добиться этого и избежать этой загрузки заранее.
есть лиспособ начать рендеринг ShellForm только после завершения входа в систему.