试图将导航器道具传递给孙辈，得到“未定义的不是对象”

Question

我的React Native应用程序的结构如下：Drawer导航器，其中包含BottomTabNavigator，它本身包含3个选项卡（每个选项卡均为Stack导航器）。尝试将抽屉式导航道具传递给BottomTabNavigator堆栈之一时，出现了我的问题。我试图将其传递给我的一个堆栈的headerLeft中的自定义组件，但是，在headerLeft组件中调用navigation.openDrawer时，出现“未定义不是对象”的消息。

App.js

<NavigationContainer ref={containerRef} initialState={initialNavigationState}>
      <Drawer.Navigator>
            <Drawer.Screen name="Feed" component={BottomTabNavigator} options={{swipeEnabled: false}} />
            <Drawer.Screen name="Settings" component={SettingsStack} options={{swipeEnabled: false}} />
      </Drawer.Navigator>
</NavigationContainer>
BottomTabNavigator.js

const BottomTab = createBottomTabNavigator();

function HomeStack({ navigation }) {
  return (
    <MyHomeStack.Navigator screenOptions={{headerShown: true,
    headerLeft: ({navigation}) => <HamburgerIcon {...navigation} /> 
   }}>
      <MyHomeStack.Screen name="home" component={HomeScreen}/>
    </MyHomeStack.Navigator>
  );

{...MessageStack Code}

{...ProfileStack Code}


export default function BottomTabNavigator({ navigation, route }) {

return (
    <BottomTab.Navigator initialRouteName={INITIAL_ROUTE_NAME} >
      <BottomTab.Screen
        name="Home"
        component={HomeStack}
        options={{title: 'Feed'}}
      />
      <BottomTab.Screen
        name="Messages"
        component={MessagesStack}
        options={{title: 'Messages'}}
      />
      <BottomTab.Screen
        name="Profile"
        component={ProfileStack}
        options={{title: 'Profile'}}
      />
    </BottomTab.Navigator>
  );
}
HamburgerIcon.js

function HamburgerIcon(navigation) {
    return (
        <TouchableOpacity
        style={{
            width: 30,
            height: 30,
            marginLeft: 10
        }}
        onPress={(navigation) => navigation.openDrawer()} >
            <SafeAreaView style={{alignSelf: "center"}}>
                 <Ionicons name='ios-menu' size={28} color='#000000'/>
            </SafeAreaView>
        </TouchableOpacity>
    );
}
export default HamburgerIcon;

我的React Native应用程序的结构如下：Drawer导航器，其中包含BottomTabNavigator，它本身包含3个选项卡（每个选项卡均为Stack导航器）。我的问题在尝试通过...

Answer 1

由于您将HamburgerIcon用作JSX组件，因此应将参数更改为props，如下所示：