如何在React Native中的Stack屏幕中显示选项卡导航

Question

我对 React Native 非常陌生，目前正在使用 React Navigation 文档实现我的导航。我试图在堆栈屏幕上显示我的选项卡导航器，但我不确定如何实现这一点。我已经研究这个问题几个小时了，没有解决办法。这就是我的选项卡导航器当前的结构：

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={HomeScreen} />
      <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>
  );
};

以下是我如何使用文档构建堆栈屏幕：

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

另外，值得一提的是我正在使用 Typescript。所以我输入了选项卡和堆栈导航器参数：

export type TabStackParamsList = {
  Home: undefined;
  Account: undefined;
  Cart: undefined;
  Favorites: undefined;
  Menu: undefined;
};

export type RootStackParamsList = {
  Main: undefined;
  Products: { customer: CustomerItemType };
};

目前，我无法在我的产品堆栈屏幕上显示我的选项卡。我希望它出现在其他几个堆栈屏幕上。如果有人能帮助指出我做错了什么，我将不胜感激，因为这是我第一次使用 React Native。

Answer 1

我已经做过类似的事情并且有效。

看看这个链接：

https://github.com/itzpradip/react-navigation-v6-mix/blob/master/src/navigation/TabNavigator.js

youtube 上也有视频。也许这可以帮助你。