React Native：在指定Stack Screen中显示底部Tab栏

要实现第一个栈页面不显示底部tab栏、后续页面内嵌tab栏的需求，核心是调整导航嵌套层级，把需要显示tab的页面统一放到底部tab导航容器内部，外层栈仅保留不需要tab的页面。

修改后的代码示例 #

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

// 页面名称常量
const homeName = "Home";
const manage = "Manage";
const stats = "Stats";
const profile = "Profile";
const live = "Live";

// 为Home标签页创建内部栈，包含Home和需要显示tab的Select_Match页面
function HomeStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} options={{ headerShown: false }} />
      <Stack.Screen name="Select_Match" component={Select_Match} options={{ headerShown: false }} />
      // 可添加其他属于Home标签页的子页面
    </Stack.Navigator>
  );
}

// 底部标签栏导航
function TabsNav() {
  return (
    <Tab.Navigator
      initialRouteName={homeName}
      screenOptions={({ route }) => ({
        // 保留你原有的tab样式配置
      })}
    >
      <Tab.Screen name={homeName} component={HomeStack} />
      <Tab.Screen name={manage} component={Manage} />
      <Tab.Screen name={stats} component={Stats} />
      <Tab.Screen name={profile} component={Profile} />
      <Tab.Screen name={live} component={Live} />
    </Tab.Navigator>
  );
};

// 外层主栈导航
function MyStack() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        {/* 第一个页面：无底部tab栏 */}
        <Stack.Screen name="Search_Teams" component={Search_Teams} options={{ headerShown: false }} />
        {/* 第二个及后续页面：通过TabsNav嵌套，自动显示底部tab栏 */}
        <Stack.Screen name="TabsNav" component={TabsNav} options={{ headerShown: false }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

关键说明 #

1. 层级拆分：外层Stack.Navigator仅包含不需要tab的Search_Teams页面，以及包裹所有需要tab页面的TabsNav容器。
2. 内部栈嵌套：给需要子页面的tab（比如Home）单独创建内部栈，把Select_Match这类需要显示tab的页面放到该栈中。
3. 跳转逻辑：如果要从Search_Teams直接跳转到Select_Match并显示tab栏，使用如下跳转代码：

navigation.navigate('TabsNav', { screen: 'Select_Match' });

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