React Native - TypeError: undefined is not an object（评估'navigation.toggleDrawer'）

Question

在我的 App 项目中，我试图创建一个按钮，如果按下该按钮会打开抽屉导航器（查看下面代码中的toDrawerButton组件）。 我的问题是按下此按钮时出现以下错误：

TypeError: undefined is not an object（评估“navigation.toggleDrawer”）

这是因为this.props是一个 void object (Object {}) 然后this.props.navigation是未定义的。

我该如何解决这个问题并让我的this.props object 不再无效？ 谢谢！

 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

您应该将 toDrawerButton 更改为：

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