Expo App:任何导航器都未处理“TOGGLE_DRAWER"操作 [英] Expo App: The action 'TOGGLE_DRAWER' was not handled by any navigator
本文介绍了Expo App:任何导航器都未处理“TOGGLE_DRAWER"操作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图从 MealsNavigator 导航中显示一个抽屉.
I was trying to show a drawer from MealsNavigator navigation.
到目前为止，我已经导入了 ff 要领:
So far I imported the ff essentials:
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());:
Then on my code I tried to call the drawer toggle via 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>
);
};
这是我的抽屉导航代码:
Here's my drawer nav code:
const mainNavigator = createDrawerNavigator();
const MainNavigatorDrawer = () => {
return (
<NavigationContainer>
<mainNavigator.Screen name="MealsFav" component={MealsFavTabNavigator} />
<mainNavigator.Screen name="Filters" component={FiltersNavigator} />
</NavigationContainer>
);
};
但最后这会返回一个错误 动作'TOGGLE_DRAWER'没有被任何导航器处理'
But in the end this returns an error The action 'TOGGLE_DRAWER' was not handled by any navigator'
当我点击左侧的汉堡菜单按钮时，没有出现抽屉.
And there is no drawer showed up when I click on the burger menu button on the left side.
我在这里错过了什么?
注意:我使用的是 React Navigation 版本 5
Note: I am using React Navigation Version 5
更新:在这里粘贴我的完整代码:
UPDATE: Pasting my complete code here:
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;
推荐答案
您应该在 Navigation 容器内有一个抽屉式导航器.
You should have a drawer navigator inside the Navigation container.
你只放了屏幕.
const MainNavigatorDrawer = () => {
return (
<NavigationContainer>
<mainNavigator.Navigator>
<mainNavigator.Screen name="MealsFav" component={MealsFavTabNavigator} />
<mainNavigator.Screen name="Filters" component={FiltersNavigator} />
</mainNavigator.Navigator>
</NavigationContainer>
);
};
这篇关于Expo App:任何导航器都未处理“TOGGLE_DRAWER"操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
