импортированный createStackNavigator не определено

Question

У меня проблема с импортом стекового навигатора в реактивный проект. Я использую синтаксис 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

Вот пакет проекта.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"
  }
}

Я запускаю проект с Xcode 9.2 на MacBook Mini (macOS Sierra 10.12.6)

У меня вопрос: по каким причинам может произойти выход импорта, неопределенный, когда импорт "должен работать". Я считаю, что мой синтаксис правильный. Есть причины, связанные со сборкой или линковкой. Я несколько раз перестраивал проект, удалял приложение на симуляторе 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

StartScreen.js содержал неверный импорт, из-за чего импорт StartScreen в AppNavigator.js стал неопределенным.

Answer 2

Вы видите это?

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') будет верным.