Question

(0,_reactNavigation.DrawerNavigator) 不是一个函数

2019-09-11

6492

react-native react-navigation

我是 React Native 的新手。我想创建简单的抽屉导航，但这里出现错误。

我已经安装了 React 导航。这是代码：

import React, { Component } from 'react';

import {
StyleSheet,
Text,
View,
StatusBar ,
TouchableOpacity
} from 'react-native';

import { DrawerNavigator } from 'react-navigation';

import Screen1 from './Screen1';
import Screen2 from './Screen2'; 

const Drawer= DrawerNavigator({
    Home:{
        screen: Screen1
    },
    Home2:{
        screen: Screen2
    }
})

export default Drawer

我希望屏幕包含抽屉导航器。

但我收到错误：

(0,_reactNavigation.DrawerNavigator) is not a function

Answer 1

它不是 DrawerNavigation 而是 createDrawerNavigation 。

如果您使用的是 react-navigation > V.4，这些功能已被移至另一个 repo。在您的情况下， createDrawerNavigator 位于 react-navigation-drawer 中，因此您需要安装它（通过使用 npm 或 yarn ）。

之后，当您导入它时，您只需执行以下操作：

import { createDrawerNavigator } from 'react-navigation-drawer';

然后像您已经在做的那样使用它。

如果您使用的是 react-navigation 版本 2 或 3，则

import { createDrawerNavigator } from 'react-navigation';

无需安装任何其他库。

DrawerNavigator 在 react-navigation 版本 1 中使用。

Answer 2

以下是设置反应导航所需遵循的一些步骤：

1）在根文件中导入抽屉导航器：

import { createSwitchNavigator, createDrawerNavigator, createAppContainer } from "react-navigation";

2）然后创建抽屉导航：

const AppDrawerNavigator = createDrawerNavigator({
    Home: {
        screen: Home
    },
    MyOrders: {
        screen: MyOrders
    },
});

3）在堆栈导航器或切换导航器中调用抽屉导航器，我的是切换导航器：

const AppSwitchNavigator = createSwitchNavigator({
    InitialScreen: {
        screen: InitialScreen
    },
    Login: {
        screen: Login
    },
    Forgot: {
        screen: Forgot
    },
    SuccessMessage: {
        screen: SuccessMessage
    },
    Drawer: AppDrawerNavigator,
}, {
  initialRouteName: 'InitialScreen',
  headerMode: 'none',
  navigationOptions: {
    gesturesEnabled: false,
    header:null
  }
});

4）在任何地方导入：

import { DrawerActions } from "react-navigation";

并使用菜单图标调用它，如

onPress={() => this.props.navigation.dispatch(DrawerActions.openDrawer())}

这将打开您的抽屉导航器，如果您需要任何帮助，请告诉我。