Question

我试图从MealsNavigator导航中显示一个抽屉。

到目前为止，我已经导入了以下要点：

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

然后在我的代码中，我尝试通过navigation.dispatch(DrawerActions.toggleDrawer());调用抽屉式拨动开关：

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'
                                // I CALLED IT HERE ----->>>>>
                                onPress={() => {
                                    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>
    );
};

这是我的抽屉导航代码：

const mainNavigator = createDrawerNavigator();

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

但是最后这将返回错误The action 'TOGGLE_DRAWER' was not handled by any navigator'

当我单击左侧的汉堡菜单按钮时，没有抽屉出现。

我在这里想念什么？

注意：我正在使用React Navigation版本5

更新：将我的完整代码粘贴到此处：

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


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.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>
    );
};

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 (
      <NavigationContainer>
      <mainNavigator.Navigator>
        <mainNavigator.Screen name="MealsFav" component={MealsFavTabNavigator} />
        <mainNavigator.Screen name="Filters" component={FiltersNavigator} />
      </mainNavigator.Navigator>
      </NavigationContainer>
    );
  };
  
export default MealsTabNav;

Answer 1

您应该在“导航”容器内有一个抽屉式导航器。

您只放置了屏幕。

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

Answer 2

Guruparan Giritharan关于将屏幕嵌套在导航器中的说法

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

要添加到该答案中，我仍然在使用调度时遇到错误，因此，直接从导航道具中调用调度toggleDrawer即可：

onPress={() => {
  navigation.toggleDrawer();
}}

更新

您正在通过

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

作为屏幕。您应该通过MealsTabNav：

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

然后从NavigationContainer中删除MealsTabNav。

Expo App：操作“ TOGGLE_DRAWER”未由任何导航器处理

2 个答案: