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

});