反应原生导航错误`_this.props.navigation.navigate`

Posted

技术标签:

【中文标题】反应原生导航错误`_this.props.navigation.navigate`【英文标题】:react native navigation error `_this.props.navigation.navigate` 【发布时间】:2022-01-16 04:16:48 【问题描述】:

我是 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】:

你需要导航到一个组件给它导航道具,如果没有,使用 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。

【讨论】:

通过使用这个错误仍然存​​在..【参考方案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;

查看&lt;Drawer.Navigator drawerContent=(props) =&gt; &lt;DrawerContent ...props /&gt;&gt; 这一行,了解我们如何将导航道具从抽屉传递到子组件。

【讨论】:

【参考方案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>
        )

【讨论】:

以上是关于反应原生导航错误`_this.props.navigation.navigate`的主要内容,如果未能解决你的问题,请参考以下文章

反应原生 Flatlist 导航

使用 redux 反应原生导航 v3

从反应原生底部选项卡导航器的标题导航

为啥安装反应原生导航模块后应用程序不起作用?

未定义的“this.props.navigation.state.props.p”导航反应原生

TaskQueue:任务错误:未定义不是反应原生的对象(评估'_this.view._component.measureInWindow')