类型错误：无法读取未定义的 react 本机抽屉的属性'navigate'

Question

我正在尝试从组件进行抽屉导航。但一直以来，它都在给我错误"；TypeError:无法读取未定义的"的属性"navigation"；当点击菜单时->配置文件链接。请告诉我哪里错了。

组件/MenuPage.js

import React from 'react'; 
import {SafeAreaView, View, StyleSheet, Image, Text, Linking,} from 'react-native'; 
import { DrawerContentScrollView, DrawerItemList, DrawerItem,} from '@react-navigation/drawer';

const image = { uri: "" };
const CustomSidebarMenu = (props) => { 
return (
<SafeAreaView style={[styles.LandingBodyColor, {flex: 1, paddingHorizontal:10}]}>
<View style={[styles.LandingMain, {marginVertical:10,}]}>
<Image source={image} style={{width:100, height:100, borderRadius:100,}} />
</View>
<View>
<Text style={[styles.TextCenter, {fontSize:18, color: '#fff', paddingBottom:10,}]}>Welcome Back.</Text>
</View>
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} />

<View style={[styles.customItem]}>
<Text style={{marginRight:10,}}>
<FontAwesome name="user" style={[styles.MenuIcon, styles.VectorIconWhiteColor]}/>
</Text>
<Text style={[styles.WhiteColor]} onPress={() => navigation.navigate(Profile) >My Profile</Text>
</View>
</DrawerContentScrollView>  
</SafeAreaView>
);
}; 
export default CustomSidebarMenu;

App.js

export default function App() {
return (

<NavigationContainer>
<Drawer.Navigator
drawerContentOptions={{
activeBackgroundColor: '#e40046',
}}
drawerContent={(props) => <CustomSidebarMenu {...props} />}
screenOptions={{
headerShown: false,
}}
>
<Drawer.Screen name="Landing Page" component={AllScreenStack}
options={() => ({
drawerLabel: () => null,
title: undefined,
drawerIcon: () => null,
headerTitleStyle: {
backgroundColor:'red',
},
})}
/>
</Drawer.Navigator>
</NavigationContainer>

);
}

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

Answer 1

尝试使用类似的道具

props.navigation.navigate('Profile')