Expo React Native onPress navigation. openrawer()不工作.提前感谢您的支

Question

我无法通过按标题按钮打开抽屉，我尝试了很多次，但我未能解决这个问题。下面是我得到的问题Uncaught TypeError: navigation. js:65openDrawer不是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

您没有在Menu.js内的代码中定义navigation的任何地方，您可以尝试:

function Menu({navigation}) {

编辑:如果像这样在options属性中尝试导航呢?

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

Answer 2

您可以尝试以下操作

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

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