undefined 不是一个对象（评估 '(0 _reactnavigation.DrawerNavigator)'）

Question

我创建了自定义侧边栏并有 5 到 6 个屏幕。我正在使用 NativeBase 并希望使用 DrawerNavigator 选项打开侧边栏，但是当我应用以下代码时出现问题。

抽屉导航器代码

import React, { Component } from "react";
import WelcomeScreen from './screens/WelcomeScreen';
import ContactScreen from './screens/ContactScreen';
import DepartmentScreen from './screens/DepartmentScreen';
import EmailServiceScreen from './screens/EmailServiceScreen';
import MoreScreen from './screens/MoreScreen';
import SideBar from "./SideBar.js";
import { DrawerNavigator } from "react-navigation";

const SidebarNavigator = DrawerNavigator(
  {
    Home: { screen: WelcomeScreen },
    Contact: { screen: ContactScreen },
    Department: { screen: DepartmentScreen },
    EmailService: { screen: EmailServiceScreen },
    More: { screen: MoreScreen }
  },
  {
    contentComponent: props => <SideBar {...props} />
  }
);
export default SidebarNavigator;

Calling them in APP.Js as propos. See following code from APP.JS


import SidebarNavigator from './src/SidebarNavigator';

class App extends Component {
  render() {
    const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
    return (
      <Provider store={createStore(reducers)}>
          <Root>
            <Router /> // It's a stack navigator which is working fine
            <SidebarNavigator />
          </Root>
      </Provider>
    );
  }
}

console.disableYellowBox = true;
export default App;

Answer 1

这里的错误是您使用的是DrawerNavigation 而不是createDrawerNavigator。

只要做这些改变，你就应该很好

import { createDrawerNavigator } from "react-navigation";

...

const SidebarNavigator = createDrawerNavigator( ... )

来源：https://reactnavigation.org/docs/en/drawer-navigator.html

Answer 2

你可以试试这个代码

您可以使用createDrawerNavigator 和createAppContainer

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

...

const SidebarNavigator = createDrawerNavigator( ... )

const AppContainer = createAppContainer(SidebarNavigator);

// Now AppContainer is the main component for React to render

export default AppContainer;