反应本机导航：未定义不是函数

Question

我最近遇到了我似乎无法解决的React Native Navigation问题。

我试图通过将不同组件的不同堆栈放置在不同文件中，然后将它们全部整合到router.js中创建的config/router.js文件中来组织堆栈。

我不断收到此错误 undefined is not a function (near '...(0, _reactNativeNavigation.createStackManager)...')

我的router.js看起来像这样

import { createBottomTabNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';

import { MapStack } from '../components/MapStack';


export const HomeViewTabs = createBottomTabNavigator({
    Map: {
        screen: MapStack,
        navigationOptions: {
            tabBarIcon:  ({tintColor}) => (
                <Icon name="ios-navigate" size={24} color={tintColor}/>
            )
        }},
    }, {
    initialRouteName: 'Map',
});

和我导入的MapStack.js

import { createStackNavigator } from 'react-native-navigation';

import Map from '../screens/Map';
import BoxOverview from '../screens/BoxOverview';


export const MapStack = createStackNavigator({
    Map: { screen: Map },
    BoxOverview: { screen: BoxOverview},
});

我的index.js

import React, { Component } from 'react';
import { HomeViewTabs } from './config/router';


class App extends Component {
    render() {
        return <HomeViewTabs />;
    }
}

export default App;

任何帮助将不胜感激，有关我样式的任何提示也将不胜感激！

编辑：

为清楚起见添加了错误照片

文件结构

app/
+--components/
+----MapStack.js
+--config/
+----router.js
+--screens/
+----Box.js
+----BoxOverview.js

解决方案：

我在我的MapStack.js文件中导入了错误的React Navigation模块。应该是import { createStackNavigation } from 'react-navigation'，而我将模块设置为'react-native-navigation' ...

Answer 1

在MapStack.js中更改

import { createStackNavigator } from 'react-native-navigation';

对此

import { createStackNavigator } from 'react-navigation';

在我的朋友指出我导入的模块名称不正确之后，找到了此解决方案...

Answer 2

您好像没有在路由器中导入正确的导航器：

import { createStackNavigator } from 'react-navigation';

应为：import { createBottomTabNavigator } from 'react-navigation';