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

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

0 голосов
/ 22 октября 2018

Работа с реактивным родным, и у меня возникает проблема с навигатором.

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

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

Ответы [ 2 ]

0 голосов
/ 24 октября 2018

Наконец-то решили проблему.Мой подход был приведен ниже:

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 голосов
/ 22 октября 2018

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

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

  1. Объявите объект вStackNavigator class
  2. Pass 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 в качестве первого экрана.

...