react-native - 导入的 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 运行项目

我的问题是:当导入“应该工作”时，什么原因会导致导入产生未定义的结果。我相信我的语法是正确的。是与构建或链接相关的原因。重建了好几次项目，把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

你看到了吗？

从 '../navigation' 导入 { AppNavigator }

试试这个:

从 '../navigation' 导入 AppNavigator

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

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

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