undefined 不是对象（评估'_this2.props.navigation.navigate'）onPress React-Native

Question

使用 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')

这个错误的原因是什么？如何解决？

Answer 1

您的导航对象未定义，因为您没有为其提供该对象。

您可以使用两种方式包含 navigation 对象，

在StackNavigatorclass
显式传递 navigation 道具。例如 - 在 index.js 中，您需要将 <Header /> 更改为 <Header navigation={this.props.navigation} />。因此，您在这里为它提供了必要的属性以执行 navigate 操作。

编辑

真正的问题在这里，

<Root style={ globalContainer }>
            <Header />
            <Screen />
        </Root>

您稍后定义路线，但更早调用 Header 屏幕。所以准确地说，navigation 对象是 index.js 本身的 undefined。

你应该做的是，将StackNavigator class 中的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 看起来像这样。

导出默认值 class 索引扩展组件 {

render() {
    const { globalContainer } = styles;
    return (
        <Root style={ globalContainer }>
            <Header navigation={this.props.navigation}/>
        </Root>
    )
}
}

如果 index.js 是您的入口文件，那么您必须创建一个调用 RootStack 的新入口文件。

类似于entryFile.js

render() { return <RootStack /> }

这将自动呈现您的所有路线并将 index.js 作为您的第一个屏幕。

Answer 2

问题终于解决了。我的方法如下：

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>
        );
    }
}

undefined 不是对象（评估'_this2.props.navigation.navigate'）onPress React-Native

undefined is not an object (evaluating '_this2.props.navigation.navigate') onPress React-Native

javascript

reactjs

react-native

react-native-navigation

react-navigation