react-native - React Navigation 5：toggleDrawer() 不起作用

Question

我正在开发 React Navigation 版本 5。我试图通过我的MealsNavigator.js文件在左侧显示我的抽屉。

这是代码：

const MealsNavigator = () => {
    return (
        <MealsNav.Navigator
            mode="modal"
            screenOptions={{
                headerStyle: {
                    backgroundColor: Colors.primaryColor,
                },
                headerTintColor: '#fff',
                headerTitleStyle: {
                    fontSize: 17
                }
            }}
        >
            <MealsNav.Screen
                name="Categories"
                component={CategoriesScreen}
                options={{
                    title: 'Meals Categories',
                    headerLeft: () => (
                        <HeaderButtons HeaderButtonComponent={HeaderButton}>
                            <Item
                                title='Menu'
                                iconName='ios-menu'
                                onPress={() => props.navigation.dispatch(DrawerActions.toggleDrawer())}
                            />
                        </HeaderButtons>
                    )
                }}

            />
            <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-menu'
                                onPress={() => console.log('Mark as the favorite')}
                            />
                        </HeaderButtons>
                    ),
                }}
            />
        </MealsNav.Navigator>
    );
};

如果我们放大它发生的代码：

 <MealsNav.Screen
                name="Categories"
                component={CategoriesScreen}
                options={{
                    title: 'Meals Categories',
                    headerLeft: () => (
                        <HeaderButtons HeaderButtonComponent={HeaderButton}>
                            <Item
                                title='Menu'
                                iconName='ios-menu'
                                onPress={() => props.navigation.dispatch(DrawerActions.toggleDrawer())}
                            />
                        </HeaderButtons>
                    )
                }}

            />

这显示了汉堡菜单，但是当我尝试单击它时，它返回ReferenceError: Can't find varible props. 我试图移除道具，但仍然没有用。

任何人都知道我在这里做错了什么？

更新：这是我的完整代码MealsNavigator.js：

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

import { Ionicons } from '@expo/vector-icons';

import { Platform } from 'react-native';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

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

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

import FiltersScreen from '../screens/FiltersScreen';

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

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

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

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

const MealsNav = createStackNavigator();

const MealsNavigator = () => {
    return (
        <MealsNav.Navigator
            mode="modal"
            screenOptions={{
                headerStyle: {
                    backgroundColor: Colors.primaryColor,
                },
                headerTintColor: '#fff',
                headerTitleStyle: {
                    fontSize: 17
                }
            }}
        >
            <MealsNav.Screen
                name="Categories"
                component={CategoriesScreen}
                options={({ navigation, route }) => ({
                    title: 'Meals Categories',
                    headerLeft: () => (
                        <HeaderButtons HeaderButtonComponent={HeaderButton}>
                            <Item
                                title='Menu'
                                iconName='ios-menu'
                                onPress={() => 
                                 navigation.toggleDrawer()}
                            />
                        </HeaderButtons>
                    )
          })}
            />
            <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-menu'
                                onPress={() => console.log('Mark as the favorite')}
                            />
                        </HeaderButtons>
                    ),
                }}
            />
        </MealsNav.Navigator>
    );
};

const MealsFavTabNavigator =
    Platform.OS === 'android'
        ? createMaterialBottomTabNavigator()
        : createBottomTabNavigator();

const getNavigationOptions = () => {
    if (Platform.OS === 'ios') {
        // Props for the ios navigator
        return {
            labeled: false,
            initialRouteName: 'Meals',
            tabBarOptions: {
                activeTintColor: 'tomato',
                inactiveTintColor: 'black',
            },
        };
    }
    // Props for android
    return {
        initialRouteName: 'Favorites',
        activeColor: 'tomato',
        inactiveColor: 'black',
        barStyle: { backgroundColor: Colors.primaryColor },
        shifting: true
    };
};

const MealsTabNav = () => {
    return (
        <NavigationContainer>
            <MealsFavTabNavigator.Navigator {...getNavigationOptions()} >
                <MealsFavTabNavigator.Screen
                    name="Meals"
                    component={MealsNavigator}
                    options={{
                        tabBarIcon: ({ focused, color, size }) => (
                            <Ionicons name="ios-restaurant" size={25} color={focused ? "tomato" : "black"} />
                        )
                    }}
                />
                <MealsFavTabNavigator.Screen
                    name="Favorites"
                    component={FavoritesNav}
                    options={{
                        tabBarIcon: ({ focused, color, size }) => (
                            <Ionicons name="ios-star" size={25} color={focused ? "tomato" : "black"} />
                        )
                    }}
                />
            </MealsFavTabNavigator.Navigator>
        </NavigationContainer>
    );
};

const FavoritesStack = createStackNavigator();

const FavoritesNav = () => {
    return (
        <FavoritesStack.Navigator
            screenOptions={{
                headerStyle: {
                    backgroundColor: Colors.primaryColor,
                },
                headerTintColor: '#fff',
                headerTitleStyle: {
                    fontSize: 17
                }
            }}>
            <FavoritesStack.Screen
                name="Favorites"
                component={FavoritesScreen}
            />
            <FavoritesStack.Screen
                name="MealDetail"
                component={MealDetailScreen}
                options={({ route }) => {
                    const mealId = route.params.mealId;
                    const selectedMeal = MEALS.find((meal) => meal.id === mealId);

                    return {
                        title: selectedMeal.title,
                    };
                }}
            />
        </FavoritesStack.Navigator>
    );
};



const FilterNav = createStackNavigator();

const FiltersNavigator = () => {
    return (
        <FilterNav.Navigator
            mode="modal"
            screenOptions={{
                headerStyle: {
                    backgroundColor: Colors.primaryColor,
                },
                headerTintColor: '#fff',
                headerTitleStyle: {
                    fontSize: 17
                }
            }}
        >
            <FilterNav.Screen
                name="Filters"
                component={FiltersScreen}
                options={{
                    title: 'Filters'
                }}

            />
        </FilterNav.Navigator>
    );
};


const mainNavigator = createDrawerNavigator();

const MainNavigatorDrawer = () => {
    return (
      <mainNavigator.Navigator>
        <mainNavigator.Screen name="MealsFav" component={MealsFavTabNavigator} />
        <mainNavigator.Screen name="Filters" component={FiltersNavigator} />
      </mainNavigator.Navigator>
    );
  };


export default MealsTabNav;

标签： react-nativereact-navigationreact-navigation-drawer

Answer 1

这很简单，导航器没有参数是道具，原因显示错误：“ReferenceError：找不到变量道具”。如果您删除道具，它仍然无法正常工作，因为您没有导航参数。来解决那个问题。您可以在这样的选项中使用参数导航

 <MealsNav.Screen
                name="Categories"
                component={CategoriesScreen}
                options={({ navigation, route }) => ({
                    title: 'Meals Categories',
                    headerLeft: () => (
                        <HeaderButtons HeaderButtonComponent={HeaderButton}>
                            <Item
                                title='Menu'
                                iconName='ios-menu'
                                onPress={() => 
                                 navigation.toggleDrawer()}
                            />
                        </HeaderButtons>
                    )
          })}
            />

更新答案：

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

import { Ionicons } from '@expo/vector-icons';

import { Platform } from 'react-native';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

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

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

import FiltersScreen from '../screens/FiltersScreen';

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

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

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

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

const MealsNav = createStackNavigator();

const MealsNavigator = () => {
    return (
        <MealsNav.Navigator
            mode="modal"
            screenOptions={{
                headerStyle: {
                    backgroundColor: Colors.primaryColor,
                },
                headerTintColor: '#fff',
                headerTitleStyle: {
                    fontSize: 17
                }
            }}
        >
            <MealsNav.Screen
                name="Categories"
                component={CategoriesScreen}
                options={({ navigation, route }) => ({
                    title: 'Meals Categories',
                    headerLeft: () => (
                        <HeaderButtons HeaderButtonComponent={HeaderButton}>
                            <Item
                                title='Menu'
                                iconName='ios-menu'
                                onPress={() => 
                                 navigation.toggleDrawer()}
                            />
                        </HeaderButtons>
                    )
          })}
            />
            <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-menu'
                                onPress={() => console.log('Mark as the favorite')}
                            />
                        </HeaderButtons>
                    ),
                }}
            />
        </MealsNav.Navigator>
    );
};

const MealsFavTabNavigator =
    Platform.OS === 'android'
        ? createMaterialBottomTabNavigator()
        : createBottomTabNavigator();

const getNavigationOptions = () => {
    if (Platform.OS === 'ios') {
        // Props for the ios navigator
        return {
            labeled: false,
            initialRouteName: 'Meals',
            tabBarOptions: {
                activeTintColor: 'tomato',
                inactiveTintColor: 'black',
            },
        };
    }
    // Props for android
    return {
        initialRouteName: 'Favorites',
        activeColor: 'tomato',
        inactiveColor: 'black',
        barStyle: { backgroundColor: Colors.primaryColor },
        shifting: true
    };
};

const MealsTabNav = () => {
    return (

            <MealsFavTabNavigator.Navigator {...getNavigationOptions()} >
                <MealsFavTabNavigator.Screen
                    name="Meals"
                    component={MealsNavigator}
                    options={{
                        tabBarIcon: ({ focused, color, size }) => (
                            <Ionicons name="ios-restaurant" size={25} color={focused ? "tomato" : "black"} />
                        )
                    }}
                />
                <MealsFavTabNavigator.Screen
                    name="Favorites"
                    component={FavoritesNav}
                    options={{
                        tabBarIcon: ({ focused, color, size }) => (
                            <Ionicons name="ios-star" size={25} color={focused ? "tomato" : "black"} />
                        )
                    }}
                />
            </MealsFavTabNavigator.Navigator>
    );
};

const FavoritesStack = createStackNavigator();

const FavoritesNav = () => {
    return (
        <FavoritesStack.Navigator
            screenOptions={{
                headerStyle: {
                    backgroundColor: Colors.primaryColor,
                },
                headerTintColor: '#fff',
                headerTitleStyle: {
                    fontSize: 17
                }
            }}>
            <FavoritesStack.Screen
                name="Favorites"
                component={FavoritesScreen}
            />
            <FavoritesStack.Screen
                name="MealDetail"
                component={MealDetailScreen}
                options={({ route }) => {
                    const mealId = route.params.mealId;
                    const selectedMeal = MEALS.find((meal) => meal.id === mealId);

                    return {
                        title: selectedMeal.title,
                    };
                }}
            />
        </FavoritesStack.Navigator>
    );
};



const FilterNav = createStackNavigator();

const FiltersNavigator = () => {
    return (
        <FilterNav.Navigator
            mode="modal"
            screenOptions={{
                headerStyle: {
                    backgroundColor: Colors.primaryColor,
                },
                headerTintColor: '#fff',
                headerTitleStyle: {
                    fontSize: 17
                }
            }}
        >
            <FilterNav.Screen
                name="Filters"
                component={FiltersScreen}
                options={{
                    title: 'Filters'
                }}

            />
        </FilterNav.Navigator>
    );
};


const mainNavigator = createDrawerNavigator();

const MainNavigatorDrawer = () => {
    return (
      // Switch container to here<========================
      <NavigationContainer>
      <mainNavigator.Navigator>
        <mainNavigator.Screen name="MealsFav" component={MealsTabNav} />
        <mainNavigator.Screen name="Filters" component={FiltersNavigator} />
      </mainNavigator.Navigator>
       </NavigationContainer>
    );
  };

// Export drawer here <==================
export default MainNavigatorDrawer;