首页 > 解决方案 > React Navigation - createStackNavigator 错误 - “未定义不是函数”

问题描述

我创建了以下代码以导入 app.js

import React from "react";
import { View } from "react-native";
import { createStackNavigator } from "react-navigation";
import HomeScreen from '../screens/HomeScreen';
import ProfileScreen from '../screens/auth/ProfileScreen';
import FilterScreen from '../screens/FilterScreen';

  const Routes = createStackNavigator(
      {
        Home: {
          screen: HomeScreen
        },
        Filters: {
          screen: FilterScreen
        },
        Profile: {
          screen: ProfileScreen
        }
      },
      {
        initialRouteName: "Home",
        navigationOptions: {
          headerTitleStyle: {
            fontWeight: "bold",
            color: "#fff",
          },
          headerTintColor: "#fff"
        }
      }
    );

    export default Routes;

我正在按如下方式导入 app.js

import Routes from './navigation/StackNavigator';

在此阶段预览我的应用程序时,我收到以下错误:

undefined is not a function (near '...(0, 

_reactNavigation.createStackNavigator)...')

<unknown>
    C:\Apps\test\app\navigation\StackNavigator.js:9:6
loadModuleImplementation
    C:\Apps\test\app\node_modules\metro\src\lib\polyfills\require.js:213:12
<unknown>
    C:\Apps\test\app\App.js:7
loadModuleImplementation
    C:\Apps\test\app\node_modules\metro\src\lib\polyfills\require.js:213:12
<unknown>
    C:\Apps\test\app\node_modules\expo\AppEntry.js:2
loadModuleImplementation
    C:\Apps\test\app\node_modules\metro\src\lib\polyfills\require.js:213:12
guardedLoadModule
    C:\Apps\test\app\node_modules\metro\src\lib\polyfills\require.js:140:45
global code
    <unknown file>:0

有谁知道可能出了什么问题?我要扯头发了!任何建议将不胜感激!

标签: javascriptreact-nativereact-navigation

解决方案


建议:

  • 将路线重命名为其他名称,例如Routes1(在两者app.jsnavigation/StackNavigator
  • 缩小错误的范围,例如删除选项createStackNavigator并尝试以下操作:

    const Routes1 = createStackNavigator();

    export default Routes1;

  • 试试这个文件中的选项卡导航器(而不是 stackNavigator),看看它是否工作正常。

  • 清理并强制重新安装模块

推荐阅读