反应原生导航错误`_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;
查看<Drawer.Navigator drawerContent=(props) => <DrawerContent ...props />>
这一行,了解我们如何将导航道具从抽屉传递到子组件。
【讨论】:
【参考方案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`的主要内容,如果未能解决你的问题,请参考以下文章
未定义的“this.props.navigation.state.props.p”导航反应原生
TaskQueue:任务错误:未定义不是反应原生的对象(评估'_this.view._component.measureInWindow')