React Native 嵌套导航以在登录/注册（StackNavigator）后实现带有选项卡（bottomTabNavigator）的登陆屏幕

Question

Here is an Expo Snack of my project : https://snack.expo.io/Sk3W8egTl

I have a StackNavigator to implement a simple Sign Up and Login functionality. It follows the structure provided in this article link

I also want to have a screen that uses a bottom Tab navigator with just two tabs for a Home Screen and a Settings Screen that I can land on after the login.

My looks like this :

import React, { useState } from 'react';
import { Platform, StatusBar, StyleSheet, View } from 'react-native';

import {createAppContainer} from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import AppContainer from './navigation'

import Home from "./screens/HomeScreen";
import Settings from "./screens/SettingsScreen";

const BottomTabNavigator = createBottomTabNavigator({ //for the bottom two tabs after landing from the login screen
  Home: {screen: Home},
  Settings: {screen: Settings},

});

//const App = createAppContainer(BottomTabNavigator); 

//export default App;

export default function App() {
  return <AppContainer />
}

The navigation folder has three files, namely :

- for the main screens in the app

import { createStackNavigator } from 'react-navigation-stack'
import Home from '../screens/HomeScreen'

const AppNavigation = createStackNavigator(
  {
    Home: { screen: Home }
  },
  {
    initialRouteName: 'Home'
  }
)

export default AppNavigation

- for the login and sign up screens

import { createStackNavigator } from 'react-navigation-stack'
import Login from '../screens/Login'
import SignUp from '../screens/SignUp'

const AuthNavigation = createStackNavigator(
  {
    Login: { screen: Login },
    SignUp: { screen: SignUp }
  },
  {
    initialRouteName: 'Login',
    headerMode: 'none',
  }
)

export default AuthNavigation

- to integrate them

import { createSwitchNavigator, createAppContainer } from 'react-navigation'
import AuthNavigation from './AuthNavigation'
import AppNavigation from './AppNavigation'


const SwitchNavigator = createSwitchNavigator(
  {
    Auth: AuthNavigation,
    App: AppNavigation
  },
  {
    initialRouteName: 'Auth'
  }
)
const AppContainer = createAppContainer(SwitchNavigator)

export default AppContainer

Right now I have the sign-in/sign-up pages and the bottom tabs separate but I want to be able to see the landing page with the two tabs after I sign in. I am really new to React Native and don't have an idea as to how to go about nesting the Navigators to achieve what I need. Please help me out here. Thank you!

Answer 1

It's simple what you are trying to achieve. In place of createStackNavigator... of your AppNavigation put your

    createBottomTabNavigator({ //for the bottom two tabs after landing from the login screen
  Home: {screen: Home},
  Settings: {screen: Settings},

});