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屏幕。确切地说，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

您不会在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 个答案: