React Native：createBottomTabNavigator 不起作用

Question

I placed all of my navigation inside a navigation/MealsNavigator.js file:

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

import CategoriesScreen from '../screens/CategoriesScreen';
import CategoryMealsScreen from '../screens/CategoryMealsScreen';
import MealDetailScreen from '../screens/MealDetailScreen';

import FavoritesScreen from '../screens/FavoritesScreen';

import HeaderButton from '../components/HeaderButton';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';

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

import { CATEGORIES } from '../data/dummy-data';

import Colors from '../constants/colors';

const MealsNav = createStackNavigator();

const MealsNavigator = () => {
    return (
        <NavigationContainer>
            <MealsNav.Navigator
                mode="modal"
                screenOptions={{
                    headerStyle: {
                        backgroundColor: Colors.primaryColor,
                    },
                    headerTintColor: '#fff',
                    headerTitleStyle: {
                        fontSize: 17
                    }
                }}
            >
                <MealsNav.Screen
                    name="Categories"
                    component={CategoriesScreen}
                    options={{
                        title: 'Meals Categories'
                    }}

                />
                <MealsNav.Screen
                    name="CategoryMeals"
                    component={CategoryMealsScreen}
                    options={({ route }) => {
                        const catId = route.params.categoryId;
                        const selectedCategory = CATEGORIES.find((cat) => cat.id === catId);

                        return {
                            title: selectedCategory.title,
                        };

                    }}
                />
                <MealsNav.Screen
                    name="MealDetail"
                    component={MealDetailScreen}
                    options={{
                        title: 'Meal Detail',
                        headerRight: () => (
                            <HeaderButtons HeaderButtonComponent={HeaderButton}>
                                <Item
                                    title='Favorite'
                                    iconName='ios-star'
                                    onPress={() => console.log('Mark as the favorite')}
                                />
                            </HeaderButtons>
                        ),
                    }}
                />
            </MealsNav.Navigator>
        </NavigationContainer>
    );
};

const MealsFavTabNavigator = createBottomTabNavigator();

const MealsTabNav = () => {
    return (
        <MealsFavTabNavigator.Navigator>
          <MealsFavTabNavigator.Screen name="Meals" component={MealsNavigator} />
          <MealsFavTabNavigator.Screen name="Favorites" component={FavoritesScreen} />
        </MealsFavTabNavigator.Navigator>
      );
};


export default MealsTabNav;

I tried to follow the documentation here: https://reactnavigation.org/docs/bottom-tab-navigator/

And the responsible for the bottom tabs is this part of the code:

const MealsFavTabNavigator = createBottomTabNavigator();

const MealsTabNav = () => {
    return (
        <MealsFavTabNavigator.Navigator>
          <MealsFavTabNavigator.Screen name="Meals" component={MealsNavigator} />
          <MealsFavTabNavigator.Screen name="Favorites" component={FavoritesScreen} />
        </MealsFavTabNavigator.Navigator>
      );
};
export default MealsTabNav;

At first, I thought I am following through the docs until it threw me an error:

could not register the navigator. Have you wrapped your app with "NavigationContainer"?

I included all the necessary files but still I am getting these errors. Any idea how to fix this?

Beginner here.

Answer 1

Try including:

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

Answer 2

You should always use NavigationContainer to wrap the top level navigator here you are using it in MealsNavigator which is wrapped inside the MealsTabNav

so remove the NavigationContainer in MealsNavigator and change the MealsTabNav like below.

const MealsTabNav = () => {
    return (
      <NavigationContainer>
        <MealsFavTabNavigator.Navigator>
          <MealsFavTabNavigator.Screen name="Meals" component={MealsNavigator} />
          <MealsFavTabNavigator.Screen name="Favorites" component={FavoritesScreen} />
        </MealsFavTabNavigator.Navigator>
       </NavigationContainer>
      );
};