Expo React Native onPress navigation.openDrawer() 不起作用。预先感谢您的支持

Question

我无法通过按标题按钮打开抽屉，我尝试了很多次但未能解决问题。下面是我遇到的问题- Menu.js：65 Uncaught TypeError：navigation.openDrawer 不是 onPress 的函数

        **My App.js file**
         import React from 'react'
            import { NavigationContainer } from '@react-navigation/native';
            import Menu from './Src/Menu';
            export default function App() {
              return (
                <NavigationContainer>
                  <Menu />
                </NavigationContainer>
              );
            }
        

Menu.js 文件这是我的菜单文件，在该文件上遇到问题 -

        import React from 'react'
        import { Button } from 'react-native';
        import { Ionicons } from '@expo/vector-icons';
        import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
        import About from './About';
        import Menu2 from './menu2';
        
        const Tab = createBottomTabNavigator();
        function Menu() {
          return (
            <Tab.Navigator
              screenOptions={({ route }) => ({
                headerShown: true,
                tabBarIcon: ({ focused, color, size }) => {
                  if (route.name === 'Menu2') {
                    return (
                      <Ionicons
                        name={
                          focused
                            ? 'ios-information-circle'
                            : 'ios-information-circle-outline'
                        }
                        size={size}
                        color={color}
                      />
                    );
                  }
                  else if (route.name === 'About') {
                    return (
                      <Ionicons
                        name={focused ? 'list' : 'list-outline'}
                        size={size}
                        color={color}
                      />
                    );
                  }
                },
                tabBarInactiveTintColor: 'gray',
                tabBarActiveTintColor: 'tomato',
              })}
            >
              <Tab.Screen
                name="Menu2"
                component={Menu2}
                options={{
                  headerLeft: () => (
                    <Button
                      onPress={() => navigation.openDrawer()}
                      title="Open Drawer"
                      color="#00cc00"
                    />
                  ),
                }}
              />
              <Tab.Screen name="About" component={About}
              />
            </Tab.Navigator>
          );
        }
        export default Menu;

Answer 1

您没有在代码中的任何位置定义

navigation

，您可以尝试：Menu.js

编辑：
如果您尝试像这样在选项属性中导航会怎样？

function Menu({navigation}) {

Answer 2

<Tab.Screen
    name="Menu2"
    component={Menu2}
    options={({navigation}) => ({
       headerLeft: () => (
          <Button
               onPress={() => navigation.openDrawer()}
               title="Open Drawer"
               color="#00cc00"
               />
       ),
    })}
/>

Answer 3

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


options={{
    headerLeft: () => (
         <Button
            onPress={() => navigation.dispatch(DrawerActions.openDrawer())}
            title="Open Drawer"
            color="#00cc00"
          />
       ),
    }}