React Native中如何在Stack屏幕显示Tab导航栏？

你当前的导航结构里，ProductsScreen 是根 Stack.Navigator 的独立屏幕，和承载 TabNavigator 的 Main 屏幕处于同一层级。Tab 导航栏仅属于 TabNavigator 内部的屏幕，当你跳转到 ProductsScreen 时，实际上是离开了 TabNavigator 的层级，因此不会显示 Tab 栏。

要让 ProductsScreen 显示 Tab 栏，需要将它嵌套到 TabNavigator 内部的某个 Tab 的堆栈中（比如和 HomeScreen 同属一个嵌套堆栈）。以下是具体修改步骤：

1. 更新导航参数类型 #

首先扩展你的类型定义，添加嵌套堆栈的参数：

// 定义Home Tab内部的堆栈参数
export type HomeStackParamsList = {
  HomeScreen: undefined;
  Products: { customer: CustomerItemType };
};

// 更新Tab导航的参数列表
export type TabStackParamsList = {
  Home: undefined;
  Account: undefined;
  Cart: undefined;
  Favorites: undefined;
  Menu: undefined;
};

export type RootStackParamsList = {
  Main: undefined;
};

2. 创建Home Tab的嵌套堆栈 #

为Home Tab创建一个内部堆栈导航器，包含原有的HomeScreen和需要显示Tab栏的ProductsScreen：

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

const HomeStack = createStackNavigator<HomeStackParamsList>();

const HomeStackNavigator = () => {
  return (
    <HomeStack.Navigator>
      {/* 原HomeScreen作为嵌套堆栈的首屏 */}
      <HomeStack.Screen 
        name="HomeScreen" 
        component={HomeScreen} 
        options={{ headerShown: false }} 
      />
      {/* ProductsScreen现在属于Home Tab的嵌套堆栈 */}
      <HomeStack.Screen name="Products" component={ProductsScreen} />
    </HomeStack.Navigator>
  );
};

3. 修改TabNavigator的配置 #

将原来Tab中Home屏幕的组件替换为刚创建的HomeStackNavigator：

const TabNavigator = () => {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarActiveTintColor: theme.colors.ui.primary,
        tabBarInactiveTintColor: theme.colors.ui.info,
        tabBarLabelStyle: {
          fontWeight: Platform.OS === "ios" ? "600" : "500",
          fontSize: 15,
        },
        tabBarIcon: ({ focused }) => {
          return <TabBarIcon route={route} focused={focused} />;
        },
        tabBarBadgeStyle: {
          backgroundColor: "#22358e",
          color: "#fff",
          top: 0,
        },
      })}
    >
      {/* 替换为嵌套堆栈导航器 */}
      <Tab.Screen name="Home" component={HomeStackNavigator} />
      <Tab.Screen
        name="Cart"
        component={CartsScreen}
        options={{ headerShown: false, tabBarBadge: 4 }}
      />
      <Tab.Screen
        name="Favorites"
        component={FavoritesScreen}
        options={{ headerShown: false, tabBarBadge: 2 }}
      />
      <Tab.Screen
        name="Account"
        component={Account}
        options={{ headerShown: false }}
      />
      <Tab.Screen
        name="Menu"
        component={Menu}
        options={{ headerShown: false }}
      />
    </Tab.Navigator>
  );
};

4. 调整根Stack的配置 #

现在ProductsScreen已经属于Home Tab的嵌套堆栈，根Stack只需要保留Main屏幕即可：

<Stack.Navigator>
  <Stack.Screen
    name="Main"
    component={TabNavigator}
    options={{ headerShown: false }}
  />
</Stack.Navigator>

5. 跳转方式更新 #

当你需要跳转到ProductsScreen时，通过Home Tab的嵌套堆栈导航：

// 在HomeScreen中跳转
navigation.navigate('Products', { customer: yourCustomerData });

这样修改后，ProductsScreen就处于TabNavigator的层级之下，会正常显示Tab导航栏。

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