Как объединить Navigator и hookNavigator в маршруты .js

Question

Это мой код в Routes.js.Основным будет LoginScreen.После входа в систему приходит HomeScreen, где должен быть Drawer со всеми этими файлами, которые я имел в виду.

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

//~/ Pages imports
import Main from '../src/Pages/Main/index';
import Expenses from '../src/Pages/Expenses/expenses';
import Food from '../src/components/Food/food';
import Host from '../src/components/Host/host';
import Locomotion from '../src/components/Locomotion/locomotion';
import Otherspage from '../src/components/Otherspage/others';

const Routes = createAppContainer(
    createStackNavigator({
       Main: {
         screen: Main,
           navigationOptions: {
               header: null,
           }
       }, 
       Expenses: {
           screen: Expenses,
           navigationOptions: {
            title: 'Despesas',
            headerTintColor: '#fff',
            headerTitleStyle: {
              fontSize: 20, 
              marginRight: 55,
              alignSelf: 'center', 
              textAlign: 'center', 
              justifyContent: 'center', 
              flex: 1, 
              textAlignVertical: 'center', 
              fontWeight: 'bold' },
            headerStyle: {backgroundColor: '#169A85'}
            }
        },

 Food: {
          screen: Food,
          navigationOptions: {
           title: 'Alimentação',
           headerTintColor: '#fff',
           headerTitleStyle: {
             fontSize: 20, 
             marginRight: 55,
             alignSelf: 'center', 
             textAlign: 'center', 
             justifyContent: 'center', 
             flex: 1, 
             textAlignVertical: 'center', 
             fontWeight: 'bold' },
           headerStyle: {backgroundColor: '#169A85'}
           }
       },
        Host: {
          screen: Host,
          navigationOptions: {
          title: 'Hospedagem',
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontSize: 20, 
            marginRight: 55,
            alignSelf: 'center', 
            textAlign: 'center', 
            justifyContent: 'center', 
            flex: 1, 
            textAlignVertical: 'center', 
            fontWeight: 'bold' },
          headerStyle: {backgroundColor: '#169A85'}
          }
      },
        Locomotion: {
          screen: Locomotion,
          navigationOptions: {
          title: 'Locomoção',
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontSize: 20, 
            marginRight: 55,
            alignSelf: 'center', 
            textAlign: 'center', 
            justifyContent: 'center', 
            flex: 1, 
            textAlignVertical: 'center', 
            fontWeight: 'bold' },
          headerStyle: {backgroundColor: '#169A85'}
          }
        },
        Otherspage: {
          screen: Otherspage,
          navigationOptions: {
          title: 'Outros',
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontSize: 20, 
            marginRight: 55,
            alignSelf: 'center', 
            textAlign: 'center', 
            justifyContent: 'center', 
            flex: 1, 
            textAlignVertical: 'center', 
            fontWeight: 'bold' },
          headerStyle: {backgroundColor: '#169A85'}
          }
        },
    })
)
    

export default Routes;

Это мой LoginScreen.У меня нет стека исправлений и ящика, поэтому я привел все страницы как стопку.Просто чтобы закончить работу

Это HomeScreen.Или должен быть прямо сейчас.

Answer 1

Вы можете поддерживать два разных стека: 1. Стек приложений 2. Главный стек приложений и использовать createSwitchNavigator для перемещения между ними.

Стек авторизации

const auth = createStackNavigator(
  {
    signUp:SignUp
  },
  {
    ...stack-config...
  }
)

Главный стек приложений

const mainApp = createStackNavigator(
      {
        mainApp:MainApp
      },
      {
        ...stack-config...
      }
    )

Объединение стеков

const app=createSwitchNavigator(
    {
      auth,
      app
    },
    {
      initialRouteName: isLoggedIn ? 'mainApp' : 'auth'
    }
)

export default createAppContainer(app)