请帮助！ React Navigation 5.x嵌套导航抽屉未从菜单按钮打开

Question

当我向右滑动时，我的抽屉打开了，但是我希望它可以使用页眉中的按钮打开。我将DrawerNavigator'createDrawer'放置在StackNavigator'createHomeStack'的旁边我收到此错误参考错误：找不到变量：导航

我也尝试过这个：options = {（{navigation}）=>（{但是我得到了错误TypeError：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了解更多有关嵌套工作原理的信息>>

Answer 2

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

// ...

options={({ navigation }) => ({
          title: 'Home Screen',
          headerLeft: () => (
            <TouchableOpacity style={{ paddingLeft: 20 }}>
              <Icon
                name='menu'
                size={25}
                style={[{ color: 'black' }]}
                onPress={() =>
                  navigation.dispatch(DrawerActions.toggleDrawer())
                }
              />
            </TouchableOpacity>
          ),
        })}