导入的 createStackNavigator 未定义

Question

在 react-native 项目中导入堆栈导航器时遇到问题。我正在使用 JSX 语法。下面我发布了有关该项目的信息，希望与找到解决此问题的方法相关。

以下代码执行导入。它位于一个名为 App.js 的文件中

import { AppNavigator } from '../navigation'
console.log(AppNavigator) // prints undefined

AppNavigator.js 如下所示：

import { createStackNavigator } from 'react-navigation'
import StartScreen from '../screen/start-screen'

const AppNavigator = createStackNavigator({
  Start: {
    screen: StartScreen
  }
}, {
  initialRouteName: 'Start',
  navigationOptions: {
    header: null
  }
})

export default AppNavigator

我已经简化了路由器配置（AppNavigator 有点复杂）以尝试隔离问题，我不认为 StartScreen 会搞砸。 StartScreen.js 以前从未失败过，但是在我尝试将 redux 与 react 导航集成后发生了“未定义的问题”，描述于：https://reactnavigation.org/docs/en/redux-integration.html

这里是项目的 package.json：

{
  "name": "App",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "clean": "watchman watch-del-all && rm -rf node_modules/ && rm -rf ios/build/ && rm -rf android/build/ && rm -rf $TMPDIR/react-* rm package-lock.json && npm install && react-native link && npm start",
    "ios": "react-native run-ios"
  },
  "dependencies": {
    "debounce": "^1.1.0",
    "deep-freeze": "0.0.1",
    "es6-promise": "^4.2.4",
    "event-emitter": "^0.3.5",
    "isomorphic-fetch": "^2.2.1",
    "moment": "^2.22.1",
    "react": "16.3.1",
    "react-datepicker": "^1.5.0",
    "react-dom": "^16.4.1",
    "react-native": "^0.55.4",
    "react-native-calendar": "^0.13.1",
    "react-native-calendars": "^1.19.3",
    "react-native-collapsible": "^0.12.0",
    "react-native-elements": "^0.19.1",
    "react-native-form": "^2.1.2",
    "react-native-modal": "^6.1.0",
    "react-native-vector-icons": "^4.6.0",
    "react-navigation": "^2.5.5",
    "react-navigation-redux-helpers": "^2.0.2",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-form": "^7.4.2",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "babel-jest": "22.4.3",
    "babel-preset-react-native": "4.0.0",
    "eslint": "^4.19.1",
    "eslint-plugin-react": "^7.10.0",
    "jest": "22.4.3",
    "react-test-renderer": "16.3.1",
    "standard": "^11.0.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

我在 MacBook Mini (macOS Sierra 10.12.6) 上使用 Xcode 9.2 运行项目

我的问题是：当导入“应该起作用”时，什么原因会导致导入产生 undefined。我相信我的语法是正确的。是与构建或链接相关的原因。我已经多次重建项目，在IOS模拟器上删除了App，并用Xcode重新安装了它。我还运行了以下命令：

"watchman watch-del-all && rm -rf node_modules/ && rm -rf ios/build/ && rm -rf android/build/ && rm -rf $TMPDIR/react-* rm package-lock.json && npm install && react-native link"

Answer 1

你看到了吗？

import { AppNavigator } from '../navigation'

试试这个：

import AppNavigator from '../navigation'

这是因为您使用的是export default AppNavigator。如果您使用这样的导出设置您的 AppNavigator：

export const AppNavigator = createStackNavigator({
  Start: {
    screen: StartScreen
  }
}, {
  initialRouteName: 'Start',
  navigationOptions: {
    header: null
  }
})

那么您的解构 (import { AppNavigator } from '../navigation') 将是正确的。

Answer 2

StartScreen.js 包含不正确的导入，导致 AppNavigator.js 中 StartScreen 的导入未定义。