如何在Expo（SDK50）中隐藏底部导航栏的嵌套Tab？

问题根源在于你把Home的子页面直接注册到了Tabs组件中——哪怕设置tabBarShowLabel: false，它仍然是Tab导航的一个页面项。正确的做法是给Home创建嵌套导航器，把Home的子页面放到这个嵌套导航里，Tabs只保留Home、Tests、Settings三个主Tab项。

具体实现步骤 #

1. 先创建Home的Stack嵌套导航器，包含Home主页和它的子页面：

import { createNativeStackNavigator } from '@react-navigation/native-stack';

const HomeStack = createNativeStackNavigator();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen 
        name="index" 
        component={HomeScreen} // 替换为你的Home主页组件
        options={{ headerShown: false }} // 按需隐藏页面头部
      />
      <HomeStack.Screen 
        name="course/[id]" 
        component={CourseDetailScreen} // 替换为你的课程详情组件
        options={{ title: '课程详情' }}
      />
    </HomeStack.Navigator>
  );
}

2. 修改Tabs布局，仅注册三个主Tab，其中Home指向上述嵌套Stack：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tabs = createBottomTabNavigator();

export default function TabsLayout() {
  return (
    <Tabs.Navigator screenOptions={{ tabBarActiveTintColor: "#404ae3" }}>
      <Tabs.Screen
        name="home"
        component={HomeStackScreen}
        options={{
          title: "Home",
          tabBarIcon: ({ color }) => <FontAwesome name="home" size={28} color={color} />,
        }}
      />
      <Tabs.Screen
        name="tests/index"
        component={TestsScreen} // 替换为你的Tests页面组件
        options={{
          title: "Tests",
          tabBarIcon: ({ color }) => <FontAwesome name="pencil" size={28} color={color} />,
        }}
      />
      <Tabs.Screen
        name="settings/index"
        component={SettingsScreen} // 替换为你的Settings页面组件
        options={{
          title: "Settings",
          tabBarIcon: ({ color }) => <FontAwesome name="cog" size={28} color={color} />,
        }}
      />
    </Tabs.Navigator>
  );
}

额外优化（可选） #

如果需要进入子页面时隐藏底部Tab栏，可以在子页面的options中添加配置：

<HomeStack.Screen 
  name="course/[id]" 
  component={CourseDetailScreen}
  options={{ 
    title: '课程详情',
    tabBarStyle: { display: 'none' } 
  }}
/>

这样切换到子页面时Tab栏会自动隐藏，返回Home主页时重新显示。

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