React Navigation 5.x 嵌套导航抽屉未从菜单按钮打开答案

【问题标题】：React Navigation 5.x nested navigation drawer not opening from menu buttonReact Navigation 5.x 嵌套导航抽屉未从菜单按钮打开
【发布时间】：2020-06-06 20:39:59
【问题描述】：

当我向右滑动时，我的抽屉会打开，但我希望它使用标题中的按钮打开。我已将 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;

【问题讨论】：

标签： react-native react-navigation navigation-drawer

【解决方案1】：

有两种方法可以解决这个问题：

将堆栈嵌套在抽屉内，而不是将抽屉嵌套在堆栈内
使用dispatch代替toggleDrawer：

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

// ...

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

【讨论】：

谢谢，我已经知道我需要使用 dispatch。

【解决方案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>
          ),
        })}

【讨论】：

这篇文章是回答还是补充问题？

【解决方案3】：

当按下按钮时，你需要从分派抽屉动作选项中获取导航道具，试试下面的代码

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

【讨论】：