React Native - TypeError：undefined 不是对象(评估 'navigation.toggleDrawer')

Question

在我的应用程序项目中，我试图创建一个按钮，如果按下该按钮，将打开抽屉导航器(查看下面代码中的toDrawerButton组件(。我的问题是，当按下这个按钮时，我会得到以下错误：

类型错误：未定义不是对象(评估"navigation.toggleDrawer"(

这是因为this.props是一个void对象(object｛｝(，然后this.props.navigation未定义。

我如何解决这个问题并使我的this.props对象不再无效？？谢谢

import React, {Component} from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import  Menu from './MenuComponent';
import Home from './HomeComponent';
import {Icon, Button} from 'react-native-elements';

const toDrawerButton = ({
headerLeft: ({navigation}) =>
(<Button
icon = {<Icon name='menu' size={24}
color='black'
onPress={() => navigation.toggleDrawer()}/>}
/>)});
// each choiche in the DrawerNavigator will have a stack hiarerchy, this is why for 
// each of them I define a stackNavigator (even if with just one screen at the moment) ------------------
const MenuNavigator = createStackNavigator();
const MenuNavigatorScreens = () => (
<MenuNavigator.Navigator initialRouteName="Menu">
<MenuNavigator.Screen name = "Menu" component={Menu} options={toDrawerButton}/>
</MenuNavigator.Navigator>);
const HomeNavigator = createStackNavigator();
const HomeNavigatorScreens = () => (
<HomeNavigator.Navigator initialRouteName="Home">
<HomeNavigator.Screen name = "Home" component={Home} />
</HomeNavigator.Navigator>);
// DrawerNavigator definition ------------------------------------
const DrawerNavigator = createDrawerNavigator();
const DrawerNavigatorScreens = () => (
<NavigationContainer>
<DrawerNavigator.Navigator initialRouteName="Home">
<DrawerNavigator.Screen name = "Home" component={HomeNavigatorScreens}/>
<DrawerNavigator.Screen name = "Menu" component={MenuNavigatorScreens}/>
</DrawerNavigator.Navigator>
</NavigationContainer>);

class MainNavigator extends Component {
constructor(props) {
super(props);
}
render(){
return (<DrawerNavigatorScreens/>)
}
};
export default MainNavigator;

Answer 1

您应该将DrawerButton更改为：

const toDrawerButton = ({navigation})=>({
headerLeft: () =>
(<Button
icon = {<Icon name='menu' size={24}
color='black'
onPress={() => navigation.toggleDrawer()}/>}
/>)});
})