React Navigation中跳转至Login页面时隐藏Bottom Tab的问题

你的问题出在导航层级结构上：当前Login页面既作为TabNavigator的一个标签页存在，又嵌套在StackNavigator里，而StackNavigator本身是TabNavigator的子屏幕。这种嵌套方式导致无论怎么跳转，Login页面始终处于Tab层级下，底部标签栏自然不会隐藏。

正确的导航结构调整方案 #

把TabNavigator作为StackNavigator的一个子屏幕，将Login页面放在StackNavigator的根层级。这样当跳转到Login时，会完全离开Tab的上下文，底部标签栏就会自动隐藏。

修改后的完整代码如下：

import React, { useContext } from "react";
import { createStackNavigator } from "@react-navigation/stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Login from "../screens/login.js";
import Home from "../screens/home.js";
import Event from "../screens/event.js";
import Local from "../screens/local.js";
import Profile from "../screens/profile.js";
import ticket from "../screens/ticket.js";
import { Context } from "../globalContext/globalContext.js";
import { Foundation, FontAwesome5, FontAwesome } from "@expo/vector-icons";

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

// 管理所有需要显示底部标签的页面
const MainTabNavigator = () => {
  const globalContext = useContext(Context);
  const { isLoggedIn } = globalContext;

  return (
    <Tab.Navigator
      screenOptions={{
        tabBarShowLabel: false,
        tabBarStyle: {
          position: "absolute",
          paddingBottom: 0,
          backgroundColor: "#121214",
          borderTopWidth: 0,
          paddingBottom: 30,
          paddingTop: 10,
          elevation: 0,
          height: 90,
        },
      }}
    >
      <Tab.Screen
        name="Início"
        component={Home}
        options={{
          headerShown: false,
          tabBarIcon: ({ color, size, focused }) => {
            if (focused) {
              return <Foundation name="home" size={35} color="#8E05C2" />;
            }
            return <Foundation name="home" size={30} color="#8D8D99" />;
          },
        }}
      />
      <Tab.Screen
        name="Ingressos"
        component={ticket}
        options={{
          headerShown: false,
          tabBarIcon: ({ color, size, focused }) => {
            if (focused) {
              return <FontAwesome name="ticket" size={33} color="#8E05C2" />;
            }
            return <FontAwesome name="ticket" size={28} color="#8D8D99" />;
          },
        }}
      />
      {isLoggedIn ? (
        <Tab.Screen
          name="Perfil"
          component={Profile}
          options={{
            headerShown: false,
            tabBarIcon: ({ color, size, focused }) => {
              if (focused) {
                return <FontAwesome5 name="user-alt" size={28} color="#8E05C2" />;
              }
              return <FontAwesome5 name="user-alt" size={23} color="#8D8D99" />;
            },
          }}
        />
      ) : null}
    </Tab.Navigator>
  );
};

// 应用根导航，包含Tab导航和独立的Login页面
export const RootStackNavigator = () => {
  const globalContext = useContext(Context);
  const { isLoggedIn } = globalContext;

  return (
    <Stack.Navigator>
      {isLoggedIn ? (
        <Stack.Screen 
          name="MainTabs" 
          component={MainTabNavigator} 
          options={{ headerShown: false }} 
        />
      ) : (
        <>
          <Stack.Screen 
            name="MainTabs" 
            component={MainTabNavigator} 
            options={{ headerShown: false }} 
          />
          <Stack.Screen
            name="Login"
            component={Login}
            options={{ headerShown: false }}
          />
        </>
      )}
    </Stack.Navigator>
  );
};

关键改动说明 #

1. 拆分导航职责：MainTabNavigator专门管理需要显示底部标签的页面，移除了原有的Login标签页。
2. 根Stack作为入口：RootStackNavigator作为应用的根导航，将MainTabNavigator和Login页面平级放置。跳转到Login时，Tab导航会被移出当前栈，底部标签栏自动隐藏。
3. 跳转逻辑适配：在需要跳转到Login的地方（比如未登录时的入口按钮），调用navigation.navigate("Login")即可离开Tab上下文，实现标签栏隐藏。

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