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()}/>}
            />)});
})