反应本机导航错误`_this.props.navigation.navigate`

Question

我是 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>
        )
    }
}

Answer 1

您需要导航到一个组件以为其提供导航道具，如果没有，请使用 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 方法，就像它在 here 中用于反应导航 6.

Answer 2

在 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} />}>，了解我们如何将导航道具从抽屉传递到子组件。

Answer 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

Answer 4

Class 基于组件

如果你想使用基于 class 的组件，那么你必须添加构造函数。

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 将 return 从父组件传递的所有道具。

功能组件

如果你想使用基于函数的组件，那么你必须在函数的参数中传递 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>
        )
}

反应本机导航错误`_this.props.navigation.navigate`

react native navigation error `_this.props.navigation.navigate`

jsx

reactjs

react-native

react-navigation

react-navigation-drawer

Class 基于组件

功能组件