如何在StackNavigation中嵌套BottomTabNavigator并全局显示底部导航

你的问题核心是导航层级结构倒置：当前把TabNavigator作为StackNavigatorHome的一个子Screen，而HomeToCheckOut等页面是和TabNavigator同级的Stack页面，跳转这些页面时会脱离Tab的上下文，导致底部导航消失。

正确的做法是给每个Tab页面单独嵌套Stack，让需要保持底部导航的页面都处于Tab的内部层级中。

调整后的完整代码 #

1. 重构Tab与内部Stack

每个Tab对应独立的Stack，所有需要显示底部导航的页面都放在对应Tab的Stack里：

// 首页专属Stack：包含Home及相关跳转页面
function HomeStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Select Location" component={SelectLocation} />
      <Stack.Screen name="HomeToCheckOut" component={HomeToCheckOut} />
      <Stack.Screen name="Other Location" component={Others1} />
    </Stack.Navigator>
  );
}

// 扫码页专属Stack（后续可扩展扫码后的跳转页面）
function ScanQRStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="ScanQR" component={CameraScreen} />
    </Stack.Navigator>
  );
}

// 设置页专属Stack（后续可扩展设置相关跳转页面）
function SettingsStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Settings" component={UpdateAccount} />
    </Stack.Navigator>
  );
}

// 调整后的Tab导航器
function TabNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen 
        name="HomeTab" 
        component={HomeStack} 
        options={{ title: "Home" }} 
      />
      <Tab.Screen 
        name="ScanQRTab" 
        component={ScanQRStack} 
        options={{ title: "ScanQR" }} 
      />
      <Tab.Screen 
        name="SettingsTab" 
        component={SettingsStack} 
        options={{ title: "Settings" }} 
      />
    </Tab.Navigator>
  );
}

2. 简化外层Stack结构

// 首页主栈：仅包裹Tab导航器（如需全局无Tab的页面可在此添加）
function StackNavigatorHome() {
  return (
    <Stack.Navigator>
      <Stack.Screen 
        name="MainTabs" 
        component={TabNavigator} 
        options={{ headerShown: false }} 
      />
    </Stack.Navigator>
  );
}

// 登录跳转栈
function StackNavigatorLogin() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="LogIn" component={Login} />
      <Stack.Screen 
        name="HomeMain" 
        component={StackNavigatorHome} 
        options={{ headerShown: false }} 
      />
    </Stack.Navigator>
  );
}

// 注册栈保持不变
function StackNavigatorRegister() {
  return (
    <Stack.Navigator>
      <Stack.Group>
        <Stack.Screen name="LogIn" component={Login}/>
        <Stack.Screen name="CreateNewSecurity" component={CreateNewSecurity} />
        <Stack.Screen name="Personal New Security" component={PersonalNewSecurity}/>
      </Stack.Group>
    </Stack.Navigator>
  );
}

3. 主入口保持原样

export default function RootStack() {
  const auth = useAppSelector(state => state.auth);
  return (
    <NavigationContainer>
      {auth.isLoggedIn ? <StackNavigatorLogin /> : <StackNavigatorRegister />}
    </NavigationContainer>
  );
}

调整逻辑说明 #

• 每个Tab内部嵌套Stack后，所有页面跳转都处于Tab的上下文层级中，底部导航会始终显示。
• 原结构中StackNavigatorHome把Tab作为单个Screen，其他页面和Tab同级，跳转时会完全替换Tab页面，导致底部导航消失，现在的结构彻底避免了这个问题。
• 层级结构更清晰：Root -> 登录/注册栈 -> 首页主栈 -> Tab导航器 -> 各Tab内部Stack -> 具体页面。

内容的提问来源于stack exchange，提问作者One