Блог

Главная - Вопросы по программированию - Ошибка типа: Не удается прочитать свойство «навигация» неопределенного собственного ящика react

Ошибка типа: Не удается прочитать свойство «навигация» неопределенного собственного ящика react

#reactjs #react-native #navigation #navigation-drawer

Вопрос:

Я новичок в react native и пытаюсь сделать навигацию по ящикам из компонента. Но все время он выдает мне ошибку «Ошибка типа: Не удается прочитать свойство «навигация» неопределенного» при нажатии на ссылку меню ->профиль. Пожалуйста, подскажите, где я ошибаюсь. С наилучшими пожеланиями заранее

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

Ответ №1:

Попробуйте с такими реквизитами, как этот

 props.navigation.navigate('Profile')

Комментарии:

1. Огромное спасибо!… ты спасаешь мне жизнь:))

Метки: