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

錯誤是：

未定義不是對象（評估'_this2.props.navigation.navigate'）

錯誤出現在Header.js的OnPress（）中

onPress = {（）=> this.props.navigation.navigate（'DrawerOpen'）

此錯誤的原因是什么？ 怎么解決？

Answer 1

未定義導航對象，因為未為其提供該對象。

您可以通過兩種方式包括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放置在您的第一個屏幕中。

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

問題描述

2 個解決方案

解決方案1
2 已采納 2018-10-22 07:08:18

解決方案2
0 2018-10-24 09:05:02

undefined不是對象（評估&#39;_this2.props.navigation.navigate&#39;）onPress React-Native

問題描述

2 個解決方案

解決方案1 2 已采納 2018-10-22 07:08:18

解決方案2 0 2018-10-24 09:05:02

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

解決方案1
2 已采納 2018-10-22 07:08:18

解決方案2
0 2018-10-24 09:05:02