react-native - React Native Navigation 5 在每个堆栈中结合堆栈和选项卡导航器可见性

Question

我只是在玩 react native

我的第一次尝试。我正在关注马克西米利安·施瓦茨米勒

Udemy 上的课程，但他正在使用导航 4，我想要

使用版本 5 所以我想出了这个代码：

const tabs = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Categories" component={CategoriesScreen} />
      <Tab.Screen name="Favorites" component={FavoritesScreen} />
    </Tab.Navigator>
  );
};
<NavigationContainer theme={MyTheme}>
  <Stack.Navigator initialRouteName="Categories">
    <Stack.Screen name="Categories" component={tabs} />
    <Stack.Screen name="CategoryMeal" component={CategoryMealScreen} />
    <Stack.Screen name="MealDetail" component={MealDetailScreen} />
  </Stack.Navigator>
</NavigationContainer>;

但是这样做我可以在类别屏幕中看到标签导航

如何设置代码以查看 CategoryMeal e MealDetail 中的选项卡导航？

标签： react-native

Answer 1

如果我正确理解您的问题，您希望将CategoriesScreen,CategoryMealScreen和保留在堆栈中MealDetailScreen的Tabs和其他屏幕中。对于此导航配置，您可以尝试以下屏幕排列：

const tabs = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Categories" component={CategoriesScreen} />
      <Tab.Screen name="CategoryMeal" component={CategoryMealScreen} />
      <Tab.Screen name="MealDetail" component={MealDetailScreen} />
    </Tab.Navigator>
  );
};
<NavigationContainer theme={MyTheme}>
  <Stack.Navigator initialRouteName="TabNavigator">
    <Stack.Screen name="TabNavigator" component={tabs} />
    <Stack.Screen name="Favorites" component={FavoritesScreen} />
  </Stack.Navigator>
</NavigationContainer>