使用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>
)
}
}
错误是:
undefined is not an object (evaluating '_this2.props.navigation.navigate')
错误出现在 Header.js 的 OnPress() 中
onPress={() => this.props.navigation.navigate('DrawerOpen')
这个错误的原因是什么？怎么解决？
最佳答案
您的导航对象未定义，因为您没有向其提供对象。
您可以包含 navigation对象使用两种方式，
- 在
StackNavigator中声明对象类 - 密码
navigation明确地 Prop 。例如 - 在index.js中你需要改变<Header />至<Header navigation={this.props.navigation} />。因此，您在这里为其提供必要的属性以执行navigate行动。
编辑
实际问题在这里，
<Root style={ globalContainer }>
<Header />
<Screen />
</Root>
您稍后将定义路线，但请调用 Header较早筛选。准确地说，navigation对象是undefined在index.js本身。
你应该做的是，列出 index.js在 StackNavigator类作为第一个对象，因此它将首先被调用。所以，你的index.js看起来像这样。
<Root style={ globalContainer }>
<Header navigation={this.props.navigation} /> //navigation object will be defined here
</Root>
另外，据我所知，您已经创建了 DrawerNavigator作为你的根堆栈。我想提出一些不同的建议，你定义一个 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作为您的第一个屏幕。
关于javascript - undefined 不是一个对象(评估 '_this2.props.navigation.navigate' ) onPress React-Native，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52923841/