如何使用navigation.openDrawer（）在本机反应中打开抽屉答案

【问题标题】：How to open drawer in react native using navigation.openDrawer()如何使用navigation.openDrawer（）在本机反应中打开抽屉
【发布时间】：2021-05-06 23:16:23
【问题描述】：

我想创建一个汉堡图标来打开抽屉，但无法这样做。我在标题右侧包含了图标按钮。每当我单击它打开抽屉时，它都会显示未定义函数的错误。我在下面提到了错误。

TypeError：navigation.openDrawer 不是函数。（在'navigation.openDrawer()'中，'navigation.openDrawer'是未定义的）

这是 App.js，这里我提到了使用 createDrawerNavigator() 的抽屉代码

App.js

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

import PassengerScreen from './Passenger';
import Lovedones from './Lovedones';
import NewTab from './FirstScreen';


import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

export default App=() => ( 
<NavigationContainer>
    <Drawer.Navigator initialRouteName="Passenger" drawerPosition="right" > 
        <Drawer.Screen name="Passenger" component={PassengerScreen} options= {{ title:'Passenger'}} />
        <Drawer.Screen name="Lovedones" component={Lovedones} options= {{ title:'loved ones!!'}} />
        <Drawer.Screen name="New Screen" component={NewTab}  />
      </Drawer.Navigator>
  </NavigationContainer>
);

这是 AccountScreen.js，在这段代码中，我使用 navigation.openDrawer() 创建了图标按钮来打开抽屉

AccountScreen.js

import * as React from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { createDrawerNavigator } from '@react-navigation/drawer';


const Stack= createStackNavigator();

Account = () => {
  return <View style={styles.container}>
    <Text>Hello!!</Text>
  </View>
};
export default AccountStack =(navigation)=>(
          <Stack.Navigator >
            <Stack.Screen name="Account" component= {Account} options={{headerRight: () => (<Ionicons.Button name="reorder-three" color={"#FF0000"} size={40} backgroundColor= {"none"} onPress={() => navigation.openDrawer()}/> )  }} />
          </Stack.Navigator>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

请帮助我找出错误。

【问题讨论】：

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

【解决方案1】：

问题出在这一行 export default AccountStack =(navigation)=>.

这里您的导航变量指向 props 而不是 props.navigation。

要解决此问题，您应该从道具中解构导航对象并将此行更改为

export default AccountStack =({navigation})=>

【讨论】：