React Navigation 5.x 嵌套导航抽屉无法从菜单按钮打开

Question

当我向右滑动时，我的抽屉打开，但我希望使用标题中的按钮打开它。我已将 DrawerNavigator 'createDrawer ' 放置在 StackNavigator 'createHomeStack' 旁边。

我收到此错误：

参考错误：找不到变量：导航

我也尝试过这个：options={({ navigation }) => ({但随后出现错误：

类型错误：navigation.toggleDrawer 不是函数。（在“navigation.toggleDrawer（）”中，“navigation.toggleDrawer”未定义）

代码：

import React from 'react';
import { TouchableOpacity } from 'react-native';
import {
  NavigationContainer,
  DrawerActions,
  DefaultTheme,
  DarkTheme,
  useNavigation,
} from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createStackNavigator } from '@react-navigation/stack';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {
  Appearance,
  useColorScheme,
  AppearanceProvider,
} from 'react-native-appearance';

import Feed from './src/feed';
import Detail from './src/detail';

import Screen1 from './src/screens/drawer/screen1';
import Screen2 from './src/screens/drawer/screen2';
import Screen3 from './src/screens/drawer/screen3';

import Tab1 from './src/screens/tabs/tab1';
import Tab2 from './src/screens/tabs/tab2';

const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();

App = () => {
  const colorScheme = useColorScheme();

  const MyTheme = {
    dark: false,
    colors: {
      primary: 'white',
      background: 'white',
      card: '#65509f',
      text: 'white',
      border: 'green',
    },
  };

  createHomeStack = () => (
    <Stack.Navigator>
      <Stack.Screen
        name='Home'
        children={this.createDrawer}
        options={{
          title: 'Home Screen',
          headerLeft: () => (
            <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
              <Icon
                name='menu'
                style={[{ color: 'white', marginLeft: 16 }]}
                size={25}
              ></Icon>
            </TouchableOpacity>
          ),
        }}
      />
      <Stack.Screen
        name='Detail'
        component={Detail}
        options={{
          title: 'Detail Screen',
        }}
      />
      <Stack.Screen name='Bottom Tabs' component={Tab1} />
      <Stack.Screen name='Top Tabs' component={Tab2} />
    </Stack.Navigator>
  );

  createDrawer = () => (
    <Drawer.Navigator>
      <Drawer.Screen name='Feed' component={Feed} />
      <Drawer.Screen name='Contacts' component={Screen1} />
      <Drawer.Screen name='Favorites' component={Screen2} />
      <Drawer.Screen name='Settings' component={Screen3} />
    </Drawer.Navigator>
  );

  return (
    <AppearanceProvider>
      <NavigationContainer theme={colorScheme == 'dark' ? DarkTheme : MyTheme}>
        {this.createHomeStack()}
      </NavigationContainer>
    </AppearanceProvider>
  );
};

export default App;

Answer 1

有两种方法可以处理这个问题：

1. 将堆栈嵌套在抽屉内，而不是将抽屉嵌套在堆栈内

2. 使用dispatch而不是toggleDrawer：

import { DrawerActions } from '@react-navigation/native';

// ...

<TouchableOpacity onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}>

在这里阅读有关嵌套如何工作的更多信息https://reactnavigation.org/docs/nesting-navigators#navigator-specific-methods-are-available-in-the-navigators-nested-inside