Блог

Главная - Вопросы по программированию - ошибка встроенной навигации react `_this.props.navigation.navigate`

ошибка встроенной навигации react `_this.props.navigation.navigate`

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

#reactjs #react-native #реагировать-навигация #jsx #реагировать-навигация-ящик

Вопрос:

Я новичок в react-native. для обучения я создал примерный проект. Я хочу перейти на другую страницу, нажав на текст внутри ящика. Итак, я столкнулся с ошибкой

 TypeError: undefined is not an object (evaluating '_this.props.navigation.navigate')

Я добавил пример кода

 import React,{Component} from "react";
import { StyleSheet, Text, View ,ImageBackground,} from "react-native";

export default class DrawerContent extends Component{

    render(){
        return(
            <View style={Styles.container}>
                <ImageBackground source={require('../../assets/drawerbg.jpg')}>

                <Text style={Styles.TextFiled}
                onPress = {()=> this.props.navigation.navigate('Home')}>Home</Text>

                <Text style={Styles.TextFiled}
                onPress = {()=> this.props.navigation.navigate('Profile')}>Profile</Text>

                <Text style={Styles.TextFiled}
                onPress = {()=> this.props.navigation.navigate('Settings')}>Settings</Text>
                </ImageBackground>
            </View>
        )
    }
}

Ответ №1:

Все компоненты, отображаемые внутри DrawerNavigator, должны наследовать навигационные реквизиты от DrawerNavigator.

DrawerNavigator должен быть родительским для всех других навигаторов (вкладок и стеков).

Следуя этим рекомендациям, давайте реорганизуем наш код, как показано ниже:

 import React, { Component } from "react";
import { StyleSheet, Text, View, ImageBackground } from "react-native";

import { createDrawerNavigator } from "@react-navigation/drawer";
import { NavigationContainer } from "@react-navigation/native";

class DrawerContent extends Component {
  render() {
    return (
      <View style={Styles.container}>
        <ImageBackground source={require("../../assets/drawerbg.jpg")}>
          <Text
            style={Styles.TextFiled}
            onPress={() => this.props.navigation.navigate("Home")}
          >
            Home
          </Text>

          <Text
            style={Styles.TextFiled}
            onPress={() => this.props.navigation.navigate("Profile")}
          >
            Profile
          </Text>

          <Text
            style={Styles.TextFiled}
            onPress={() => this.props.navigation.navigate("Settings")}
          >
            Settings
          </Text>
        </ImageBackground>
      </View>
    );
  }
}

const MainNavigation = () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator drawerContent={(props) => <DrawerContent {...props} />}>
        {/* Other screens here */}
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

export default MainNavigation;

Просмотрите эту строку <Drawer.Navigator drawerContent={(props) => <DrawerContent {...props} />}> о том, как мы передаем навигационные реквизиты из ящика в дочерний компонент.

Ответ №2:

Вам нужно перейти к компоненту, чтобы предоставить ему навигационную поддержку, если нет, используйте метод withNavigation для экспорта вашего компонента, чтобы предоставить вам поддержку:

 import React,{Component} from "react";
import { StyleSheet, Text, View ,ImageBackground,} from "react-native";
import { withNavigation } from 'react-navigation';

class DrawerContent extends Component{

    render(){
        return(
            <View style={Styles.container}>
                <ImageBackground source={require('../../assets/drawerbg.jpg')}>

                <Text style={Styles.TextFiled}
                onPress = {()=> this.props.navigation.navigate('Home')}>Home</Text>

                <Text style={Styles.TextFiled}
                onPress = {()=> this.props.navigation.navigate('Profile')}>Profile</Text>

                <Text style={Styles.TextFiled}
                onPress = {()=> this.props.navigation.navigate('Settings')}>Settings</Text>
                </ImageBackground>
            </View>
        )
    }
}

export default withNavigation(DrawerContent )

или вы можете использовать метод useNavigation, как он используется здесь для react navigation 6 .

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

1. при использовании эта ошибка остается..

Ответ №3:

Решен ответ с помощью useNavigation

 import React,{Component} from "react";
import { StyleSheet, Text, View ,ImageBackground,} from "react-native";
import { useNavigation } from "@react-navigation/native";

const DrawerContent =() => {
    const navigation = useNavigation()
        return(
            <View style={Styles.container}>
           

                <Text style={Styles.TextFiled}
                onPress = {()=>navigation.navigate('Home') }>Home</Text>

                <Text style={Styles.TextFiled}
                onPress = {()=> navigation.navigate('Profile')}>Profile</Text>

                <Text style={Styles.TextFiled}
                onPress = {()=> navigation.navigate('Settings')}>Settings</Text>
               
            </View>
        )
    }

export default DrawerContent

Ответ №4:

Компонент на основе классов

Если вы хотите использовать компонент на основе классов, вам необходимо добавить конструктор.

 import React,{Component} from "react";
import { StyleSheet, Text, View ,ImageBackground,} from "react-native";

export default class DrawerContent extends Component{
constructor(props) {
   super(props);  
   this.state = {
     //your states
   }
}
    render(){
        return(
            <View style={Styles.container}>
                <ImageBackground source={require('../../assets/drawerbg.jpg')}>

                <Text style={Styles.TextFiled}
                onPress = {()=> this.props.navigation.navigate('Home')}>Home</Text>

                <Text style={Styles.TextFiled}
                onPress = {()=> this.props.navigation.navigate('Profile')}>Profile</Text>

                <Text style={Styles.TextFiled}
                onPress = {()=> this.props.navigation.navigate('Settings')}>Settings</Text>
                </ImageBackground>
            </View>
        )
    }
}

теперь this.props вернет все реквизиты, передаваемые из родительского компонента.

Функциональный компонент

Если вы хотите использовать компонент на основе функций, вам необходимо передать props в аргумент вашей функции.

 import React,{} from "react";
import { StyleSheet, Text, View ,ImageBackground,} from "react-native";

export default fucntion DrawerContent(props) {

        return(
            <View style={Styles.container}>
                <ImageBackground source={require('../../assets/drawerbg.jpg')}>

                <Text style={Styles.TextFiled}
                onPress = {()=> props.navigation.navigate('Home')}>Home</Text>

                <Text style={Styles.TextFiled}
                onPress = {()=> props.navigation.navigate('Profile')}>Profile</Text>

                <Text style={Styles.TextFiled}
                onPress = {()=> props.navigation.navigate('Settings')}>Settings</Text>
                </ImageBackground>
            </View>
        )
}
Метки: