React Native 嵌套導航以在登錄/注冊（StackNavigator）后實現帶有選項卡（bottomTabNavigator）的登陸屏幕

Question

這是我的項目的世博小吃： https : //snack.expo.io/Sk3W8egTl

我有一個 StackNavigator 來實現一個簡單的注冊和登錄功能。 它遵循本文鏈接中提供的結構

我還想要一個使用底部選項卡導航器的屏幕，其中只有兩個選項卡用於主屏幕和登錄后可以登陸的設置屏幕。

我的App.js看起來像這樣：

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 />
}

導航文件夾有三個文件，分別是：

AppNavigation - 用於應用程序的主屏幕

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

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

export default AppNavigation

AuthNavigation - 用於登錄和注冊屏幕

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

index.js - 整合它們

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

現在，我將登錄/注冊頁面和底部選項卡分開，但我希望在登錄后能夠看到帶有兩個選項卡的登錄頁面。我真的是 React Native 的新手並且沒有關於如何嵌套導航器以實現我需要的想法。 請幫幫我。 謝謝！

Answer 1

您想要實現的目標很簡單。 代替 createStackNavigator... 你的 AppNavigation 把你的

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

});