Undefined 不是 _reactNavigation.StackNavigator 附近的函数答案

【问题标题】：Undefined is not a function near _reactNavigation.StackNavigatorUndefined 不是 _reactNavigation.StackNavigator 附近的函数
【发布时间】：2019-05-27 17:29:06
【问题描述】：

我想同时设置一个带有side menu 和tab menu 的React Native 应用程序。

我在关注this 教程。

My code.

我得到错误：

undefined 不是函数（'...(0 , _reactNavigation.TabNavigator)...' 附近）

你可以在这里看到：

部分文件预览：

App.js

import React from 'react';
import { Drawer } from './src/navigators';

export default class App extends React.Component {
  render() {
    return (
      <Drawer />
    );
  }
}

navigators.js

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';

// Navigators
import { DrawerNavigator, StackNavigator, TabNavigator } from 'react-navigation'

// StackNavigator screens
import ItemList from './ItemList'
import Item from './Item'

// TabNavigator screens
import TabA from './TabA'
import TabB from './TabB'
import TabC from './TabC'

// Plain old component
import Plain from './Plain'

export const Stack = StackNavigator({
  ItemList: { screen: ItemList },
  Item: { screen: Item },
}, {
  initialRouteName: 'ItemList',
})

export const Tabs = TabNavigator({
  TabA: { screen: TabA },
  TabB: { screen: TabB },
  TabC: { screen: Stack },
}, {
  order: ['TabA', 'TabB', 'TabC']
})

export const Drawer = DrawerNavigator({
  Stack: { screen: Stack },
  Tabs: { screen: Tabs },
  Plain: { screen: Plain },
})

【问题讨论】：

标签： react-native react-navigation jsx expo

【解决方案1】：

您从 React Navigation 中导入的内容对于您使用的版本 (3.0.9) 不正确。那些命名的导出在 v1 之后重命名，这就是您所遵循的教程所使用的。

您正在导入：

import { DrawerNavigator, StackNavigator, TabNavigator } from 'react-navigation';

当您需要这样导入它们时：

import {
    createDrawerNavigator,
    createStackNavigator,
    createBottomTabNavigator,
    createAppContainer,
} from 'react-navigation';

您还需要将根导航器（在本例中为抽屉导航器）包装在 createAppContainer 中。

像这样：

export const Drawer = createAppContainer(
  createDrawerNavigator({
    Stack: { screen: Stack },
    Tabs: { screen: Tabs },
    Plain: { screen: Plain },
  })
);

如果您想快速修复，只需进入您的 package.json 并替换 React Navigation from "react-navigation": "^3.0.9" to "react-navigation": "^1.5.2" 和 Snack 的版本将按预期运行https://snack.expo.io/@chris-bytelion/react-s

【讨论】：

谢谢@ChrisPoe。我更喜欢使用最新版本的react-navigation。我改用函数尝试了您的方法，但仍然出现错误。这是snack.expo.io 项目。你能解决这个问题吗？ snack.expo.io/rksUWzDZE 并给我解决方案？谢谢！
@davidesp 确定所有已修复snack.expo.io/@chris-bytelion/react-s。您收到该错误是因为 createTabNavigator 在较新版本中不是导入选项。您的选项是createBottomTabNavigator、createMaterialBottomTabNavigator 和createMaterialTopTabNavigator，如下所述：reactnavigation.org/docs/en/tab-based-navigation.html。此外，在您的 app.js 中确保您导入 AppNavigator 而不是 Drawer，因为您使用 createAppContainer 包装了根导航器。
乐于助人！ @davidesp

【解决方案2】：

在我的情况下，修复是这样的：

"react-navigation": "^1.5.2"

在 package.json 中。

【讨论】：