![](/img/trans.png)
[英]React Native Error “undefined is not an object (evaluating '_this2.props.navigation.navigate')”
[英]undefined is not an object (evaluating '_this2.props.navigation.navigate') onPress React-Native
使用react-native,我在使用导航器时遇到问题。
Routes.js
import React from 'react';
import { createStackNavigator, createDrawerNavigator } from 'react-navigation';
import ItemListScreen from '../screens/ItemListScreen';
import ItemDetailsScreen from '../screens/ItemDetailsScreen';
export const RootStack = () => {
return createDrawerNavigator(
{
Home: {
screen: ItemList
},
ItemDetails: {
screen: ItemDetails
}
}
)}
export const ItemList = createStackNavigator({
ItemList: {
screen: ItemListScreen
}
},
{
headerMode: 'none'
});
export const ItemDetails = createStackNavigator({
ItemDetails: {
screen: ItemDetailsScreen
}
},
{
headerMode: 'none'
});
Header.js
import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import { Header, Body, Text, Icon, Left, Right } from 'native-base';
export default class AppHeader extends Component {
render() {
const headerText = this.props.headerText
return (
<Header>
<Left><Icon name='menu' onPress={()=> this.props.navigation.navigate('DrawerOpen')} /></Left>
<Body style={styles.header}>
<Text style={styles.headerText}>{headerText}</Text>
</Body>
<Right></Right>
</Header>
);
}
}
Index.js
import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import { Root, Button, Text, Drawer } from 'native-base';
import {RootStack} from './config/Routes';
import Header from './components/Header/Header';
import SideBar from './components/SideBar/SideBar';
export default class Index extends Component {
render() {
const Screen = RootStack();
const { globalContainer } = styles;
return (
<Root style={ globalContainer }>
<Header />
<Screen />
</Root>
)
}
}
错误是:
未定义不是对象(评估'_this2.props.navigation.navigate')
错误出现在Header.js的OnPress()中
onPress = {()=> this.props.navigation.navigate('DrawerOpen')
此错误的原因是什么? 怎么解决?
未定义导航对象,因为未为其提供该对象。
您可以通过两种方式包括navigation
对象:
StackNavigator
类中声明该对象 navigation
道具。 例如,在index.js
您需要将<Header />
更改为<Header navigation={this.props.navigation} />
。 因此,在这里为执行navigate
操作提供必要的属性。 编辑
实际的问题在这里,
<Root style={ globalContainer }>
<Header />
<Screen />
</Root>
您稍后会定义路线,但会提前调用“ Header
屏幕。 准确地说,在index.js
本身中undefined
navigation
对象。
您应该做的是,将StackNavigator
类中的index.js
列为第一个对象,以便首先调用它。 因此,您的index.js将看起来像这样。
<Root style={ globalContainer }>
<Header navigation={this.props.navigation} /> //navigation object will be defined here
</Root>
另外,正如我所看到的,您已经将DrawerNavigator
为RootStack。 我想提出一些不同的建议,您将StackNavigator
定义为根堆栈,然后在其中包含抽屉式导航。
某些东西-
export const RootStack = createStackNavigator({
Index: //your index.js screen declaration
Drawer: //drawer navigator object
ItemDetails: {
screen: ItemDetailsScreen
}
},
编辑2
您不会在index.js中调用Rootstack。 您的index.js看起来像这样。
导出默认类索引扩展了组件{
render() {
const { globalContainer } = styles;
return (
<Root style={ globalContainer }>
<Header navigation={this.props.navigation}/>
</Root>
)
}
}
如果index.js是您的入口文件,则必须创建一个新的入口文件来调用RootStack。
类似于entryFile.js
render() { return <RootStack /> }
这将自动呈现所有路线并将index.js放置在您的第一个屏幕中。
终于解决了问题。 我的方法如下:
Routes.js
import React from 'react';
import { createStackNavigator } from 'react-navigation';
import { Drawer } from './Drawer';
export const App = createStackNavigator(
{
Drawer: {
screen: Drawer
}
},
{
initialRouteName: "Drawer",
headerMode: "none"
}
)
Drawer.js
import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import { createDrawerNavigator } from 'react-navigation';
import ItemListScreen from '../screens/ItemListScreen';
import SideBar from '../components/SideBar/SideBar';
export const Drawer = createDrawerNavigator(
{
Home: { screen: ItemListScreen }
},
{
navigationOptions: {
gesturesEnabled: false
},
initialRouteName: "Home",
drawerPosition: 'left',
contentComponent: props => <SideBar {...props} />
}
);
Index.js
import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import { Button, Text, Drawer } from 'native-base';
import { App } from './config/Routes';
import AppHeader from './components/Header/Header';
export default class Index extends Component {
render() {
const { globalContainer } = styles;
return (
<App style={ globalContainer } navigation={this.props.navigation}></App>
)
}
}
Header.js
import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import { Header, Body, Text, Icon, Left, Right } from 'native-base';
export default class AppHeader extends Component {
render() {
const {navigation, headerText} = this.props
const {header, text, drawerIcon } = styles
return (
<Header>
<Left>
<Icon name='menu' style={drawerIcon} onPress={()=> navigation.openDrawer()} />
</Left>
<Body style={header}>
<Text style={text}>{headerText}</Text>
</Body>
<Right></Right>
</Header>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.