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从未失败过，但是在https://reactnavigation.org/docs/en/redux-integration.html

中描述了我尝试将redux与react导航集成后发生的“未定义问题”

这是项目的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模拟器上删除了该应用程序，并用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的导入。

导入的createStackNavigator未定义

2 个答案: