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 не является объектом (оценка '_this2.props.navigation.navigate')

Ошибка в OnPress () в Header.js

OnPress = {() => this.props.navigation.navigate ('DrawerOpen')

В чем причина этой ошибки? Как решить?

javascript reactjs react-native react-navigation react-native-navigation

0

WahidSherief 22 Окт 2018 в 10:00

Answer 1

Ваш объект навигации не определен, поскольку вы не предоставляете ему объект.

Вы можете включить объект navigation двумя способами:

Объявите объект в классе StackNavigator
Явно передайте свойства navigation. Например, в 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 своим RootStack. Я хотел бы предложить что-то другое. Вы определяете StackNavigator в качестве корневого стека, а затем включаете в него навигацию по ящику.

Что-то на линиях -

export const RootStack = createStackNavigator({
Index: //your index.js screen declaration
Drawer: //drawer navigator object
ItemDetails: {
    screen: ItemDetailsScreen
  }
},

РЕДАКТИРОВАТЬ 2

Вы не будете вызывать Rootstack в index.js. Ваш index.js будет выглядеть примерно так.

Экспорт класса по умолчанию Index extends Component {

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

Если index.js - ваш входной файл, вам нужно будет создать новый входной файл, который вызывает RootStack.

Что-то вроде entryFile.js

render() { return <RootStack /> }

Который автоматически отобразит все ваши маршруты и поместит index.js в качестве первого экрана.

2

Aseem Upadhyay 22 Окт 2018 в 07:46

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

0

WahidSherief 24 Окт 2018 в 09:05

undefined не является объектом (оценка '_this2.props.navigation.navigate') onPress React-Native

2 ответа

Похожие вопросы

Новые вопросы

javascript