javascript - 在 React Native 项目中，为什么导入中的顶级目录被称为 'app' ？

Question

我试图理解一些 React Native 源代码中的导入。在文件 questionnaire.actions.js 中，该文件位于相对于顶级目录(名为 lucy-app)的位置，此处:

./src/containers/newUserOnboarding/questionnaire/questionnaire.actions.js

此 JS 文件包含以下导入:

import api from 'app/src/api';

从上下文中可以清楚地看出，顶级目录被称为 'app'，因为它包含一个子目录 src，其中包含 api.js:

.
├── src
│   ├── api.js

我的问题是:为什么顶级目录被称为app？这是 React Native 项目的某种默认名称吗？ (我查阅了一般 Javascript 文档 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import ，但找不到原因)。

更新

我注意到顶级目录中的 package.json 包含以下内容:

{
    "name": "app",

这显然使目录“可引用”为 app。但这是如何做到的呢？如果它是执行此操作的依赖项之一，则以下是依赖项:

"dependencies": {
    "analytics-react-native": "^1.2.0",
    "immutability-helper": "^2.5.0",
    "libphonenumber-js": "^1.1.10",
    "lodash": "^4.17.4",
    "moment": "^2.22.x",
    "moment-timezone": "^0.5.x",
    "prop-types": "^15.6.0",
    "querystring": "^0.2.0",
    "raven-for-redux": "^1.3.0",
    "react": "^16.2.0",
    "react-native": "^0.53.3",
    "react-native-android-keyboard-adjust": "^1.1.1",
    "react-native-code-push": "^5.3.2",
    "react-native-config": "^0.11.5",
    "react-native-datepicker": "^1.6.0",
    "react-native-intercom": "^11.0.0",
    "react-native-keyboard-aware-scroll-view": "^0.4.4",
    "react-native-linear-gradient": "^2.4.0",
    "react-native-markdown-renderer": "^3.1.0",
    "react-native-material-dropdown": "^0.11.1",
    "react-native-material-kit": "git://github.com/xinthink/react-native-material-kit#95b0980",
    "react-native-material-menu": "^0.2.3",
    "react-native-modal": "^4.1.1",
    "react-native-onesignal": "^3.0.6",
    "react-native-phone-input": "^0.2.1",
    "react-native-restart": "^0.0.6",
    "react-native-router-flux": "4.0.0-beta.27",
    "react-native-sentry": "^0.35.3",
    "react-native-smart-splash-screen": "^2.3.5",
    "react-native-snackbar": "^0.4.3",
    "react-native-swiper": "^1.5.13",
    "react-native-vector-icons": "^4.4.0",
    "react-navigation": "^1.5.11",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-devtools-extension": "^2.13.2",
    "redux-form": "^7.3.0",
    "redux-logger": "^3.0.6",
    "redux-persist": "^4.10.1",
    "redux-thunk": "^2.2.0",
    "reselect": "^3.0.1",
    "validator": "^10.2.0"
},

更新2

我将尝试分享我的目录结构的简化版本，因为 tree 命令会生成数万行。这是 lucy-app 上面目录的 ls:

Kurts-MacBook-Pro-2:lucy2 kurtpeek$ ls
Dockerfile      change_db_owner.sh  latest.dump     lucy-web        staging_db_12_July.dump
Procfile        crontab         lucy-app        readme.md

这是lucy-app的部分树:

└── src
    ├── actions.js
    ├── api.js
    ├── app.js
    ├── components
    │   ├── Headshot
    │   │   ├── Headshot.js
    │   │   ├── Headshot.styles.js
    │   │   └── __tests__
    │   │       ├── Headshot-test.js
    │   │       └── __snapshots__
    │   ├── InfoCard.js
    │   ├── __tests__
    │   │   ├── InfoCard-test.js
    │   │   ├── __snapshots__
    │   │   ├── backButtonView-test.js
    │   │   ├── markdownView-test.js
    │   │   ├── splash-test.js
    │   │   ├── text-test.js
    │   │   └── webViewModal-test.js
    │   ├── backButtonView.js
    │   ├── buttons
    │   │   ├── ImageButton.js
    │   │   ├── __tests__
    │   │   │   ├── __snapshots__
    │   │   │   ├── backButton-test.js
    │   │   │   ├── button-test.js
    │   │   │   ├── imageButton-test.js
    │   │   │   ├── intercomButton-test.js
    │   │   │   └── textButton-test.js
    │   │   ├── backButton.js
    │   │   ├── button.js
    │   │   ├── button.styles.js
    │   │   ├── intercomButton.js
    │   │   └── textButton.js
    │   ├── guideDialog
    │   │   ├── __tests__
    │   │   │   ├── __snapshots__
    │   │   │   └── guideDialog-test.js
    │   │   ├── guideDialog.js
    │   │   └── guideDialog.styles.js
    │   ├── initial
    │   │   ├── __tests__
    │   │   │   ├── __snapshots__
    │   │   │   ├── initial-test.js
    │   │   │   └── initialHeader-test.js
    │   │   ├── initial.js
    │   │   ├── initial.styles.js
    │   │   └── initialHeader.js
    │   ├── inputs
    │   │   ├── __tests__
    │   │   │   ├── __snapshots__
    │   │   │   ├── dropdownField-test.js
    │   │   │   ├── emailField-test.js
    │   │   │   ├── label-test.js
    │   │   │   ├── numberField-test.js
    │   │   │   ├── phoneField-test.js
    │   │   │   ├── textField-test.js
    │   │   │   └── wrapField-test.js
    │   │   ├── dropdownField.js
    │   │   ├── emailField.js
    │   │   ├── label.js
    │   │   ├── numberField.js
    │   │   ├── phoneField.js
    │   │   ├── textField.js
    │   │   ├── textField.styles.js
    │   │   └── wrapField.js
    │   ├── markdownView.js
    │   ├── splash.js
    │   ├── text.js
    │   ├── validationMessage
    │   │   ├── __tests__
    │   │   │   ├── __snapshots__
    │   │   │   └── validationMessage-test.js
    │   │   ├── validationMessage.js
    │   │   └── validationMessage.styles.js
    │   └── webViewModal.js
    ├── containers
    │   ├── changePassword
    │   │   ├── __tests__
    │   │   │   ├── __snapshots__
    │   │   │   ├── changePassword.reducer-test.js
    │   │   │   └── changePassword.ui-test.js
    │   │   ├── changePassword.actions.js
    │   │   ├── changePassword.container.js
    │   │   ├── changePassword.reducer.js
    │   │   ├── changePassword.styles.js
    │   │   └── changePassword.ui.js
    │   ├── forgotPassword
    │   │   ├── __tests__
    │   │   │   ├── __snapshots__
    │   │   │   ├── forgotPassword.reducer-test.js
    │   │   │   └── forgotPassword.ui-test.js
    │   │   ├── forgotPassword.actions.js
    │   │   ├── forgotPassword.container.js
    │   │   ├── forgotPassword.reducer.js
    │   │   ├── forgotPassword.styles.js
    │   │   └── forgotPassword.ui.js
    │   ├── infoCards
    │   │   ├── HowToUse.js
    │   │   ├── MeetGuide.js
    │   │   └── __tests__
    │   │       ├── HowToUse-test.js
    │   │       ├── MeetGuide-test.js
    │   │       └── __snapshots__
    │   ├── login
    │   │   ├── __tests__
    │   │   │   ├── __snapshots__
    │   │   │   ├── login.reducer-test.js
    │   │   │   └── login.ui-test.js
    │   │   ├── login.actions.js
    │   │   ├── login.container.js
    │   │   ├── login.reducer.js
    │   │   ├── login.selectors.js
    │   │   ├── login.styles.js
    │   │   └── login.ui.js
    │   ├── navigation
    │   │   ├── Drawer
    │   │   │   ├── Drawer.js
    │   │   │   ├── Drawer.styles.js
    │   │   │   └── __tests__
    │   │   │       ├── Drawer-test.js
    │   │   │       └── __snapshots__
    │   │   ├── GuideNavBar
    │   │   │   ├── GuideNavBar.container.js
    │   │   │   ├── GuideNavBar.styles.js
    │   │   │   ├── GuideNavBar.ui.js
    │   │   │   └── __tests__
    │   │   │       ├── GuideNavBar-test.js
    │   │   │       └── __snapshots__
    │   │   ├── components
    │   │   │   ├── BackButton.js
    │   │   │   ├── OpenDrawerButton.js
    │   │   │   ├── OptionsMenu.js
    │   │   │   ├── QuestionnaireMenu.js
    │   │   │   └── __tests__
    │   │   │       ├── BackButton-test.js
    │   │   │       ├── OpenDrawerButton-test.js
    │   │   │       ├── OptionsMenu-test.js
    │   │   │       ├── QuestionnaireMenu-test.js
    │   │   │       └── __snapshots__
    │   │   └── navigation.styles.js
    │   ├── newUserOnboarding
    │   │   ├── activate
    │   │   │   ├── __tests__
    │   │   │   │   ├── __snapshots__
    │   │   │   │   ├── activate.ui-test.js
    │   │   │   │   ├── activationCode.ui-test.js
    │   │   │   │   └── email.ui-test.js
    │   │   │   ├── activate.actions.js
    │   │   │   ├── activate.container.js
    │   │   │   ├── activate.reducer.js
    │   │   │   ├── activate.styles.js
    │   │   │   ├── activate.ui.js
    │   │   │   ├── activationCode.ui.js
    │   │   │   └── email.ui.js
    │   │   ├── activateHelp
    │   │   │   ├── __tests__
    │   │   │   │   ├── __snapshots__
    │   │   │   │   └── activateHelp.ui-test.js
    │   │   │   ├── activateHelp.styles.js
    │   │   │   └── activateHelp.ui.js
    │   │   ├── activateSuccess
    │   │   │   ├── __tests__
    │   │   │   │   ├── __snapshots__
    │   │   │   │   └── activateSuccess.ui-test.js
    │   │   │   ├── activateSuccess.styles.js
    │   │   │   └── activateSuccess.ui.js
    │   │   ├── education
    │   │   │   ├── __tests__
    │   │   │   │   ├── __snapshots__
    │   │   │   │   └── education.ui-test.js
    │   │   │   ├── education.styles.js
    │   │   │   └── education.ui.js
    │   │   ├── loading
    │   │   │   ├── __tests__
    │   │   │   │   ├── __snapshots__
    │   │   │   │   └── loading.ui-test.js
    │   │   │   ├── loading.container.js
    │   │   │   ├── loading.styles.js
    │   │   │   └── loading.ui.js
    │   │   ├── newUserOnboarding.reducer.js
    │   │   ├── notificationPermissions
    │   │   │   ├── __tests__
    │   │   │   │   ├── __snapshots__
    │   │   │   │   └── notificationPermissions.ui-test.js
    │   │   │   ├── notificationPermissions.container.js
    │   │   │   └── notificationPermissions.ui.js
    │   │   ├── questionnaire
    │   │   │   ├── addressForm
    │   │   │   │   ├── __tests__
    │   │   │   │   │   └── addressForm-test.js
    │   │   │   │   ├── addressForm.actions.js
    │   │   │   │   ├── addressForm.container.js
    │   │   │   │   ├── addressForm.styles.js
    │   │   │   │   └── addressForm.ui.js
    │   │   │   ├── components
    │   │   │   │   ├── __tests__
    │   │   │   │   │   ├── __snapshots__
    │   │   │   │   │   ├── questionnaireFooter-test.js
    │   │   │   │   │   ├── questionnaireHeader-test.js
    │   │   │   │   │   └── questionnaireMenu-test.js
    │   │   │   │   ├── questionnaireFooter.js
    │   │   │   │   ├── questionnaireHeader.js
    │   │   │   │   └── questionnaireMenu.js
    │   │   │   ├── questionnaire.actions.js
    │   │   │   ├── questionnaire.container.js
    │   │   │   ├── questionnaire.reducer.js
    │   │   │   ├── questionnaire.selectors.js
    │   │   │   ├── questionnaire.styles.js
    │   │   │   ├── questionnaire.ui.js
    │   │   │   └── questions
    │   │   │       ├── __tests__
    │   │   │       │   ├── __snapshots__
    │   │   │       │   ├── booleanQuestion-test.js
    │   │   │       │   ├── dateQuestion-test.js
    │   │   │       │   ├── multiSelectQuestion-test.js
    │   │   │       │   ├── questionWrapper-test.js
    │   │   │       │   ├── selectQuestion-test.js
    │   │   │       │   └── textQuestion-test.js
    │   │   │       ├── booleanQuestion.ui.js
    │   │   │       ├── dateQuestion.ui.js
    │   │   │       ├── multiSelectQuestion.ui.js
    │   │   │       ├── optionalMessage.ui.js
    │   │   │       ├── questionWrapper.ui.js
    │   │   │       ├── selectQuestion.ui.js
    │   │   │       └── textQuestion.ui.js
    │   │   ├── questionnaireIntro
    │   │   │   ├── __tests__
    │   │   │   │   ├── __snapshots__
    │   │   │   │   └── questionnaireIntro.ui-test.js
    │   │   │   ├── questionnaireIntro.container.js
    │   │   │   ├── questionnaireIntro.styles.js
    │   │   │   └── questionnaireIntro.ui.js
    │   │   └── setAccount
    │   │       ├── __tests__
    │   │       │   ├── __snapshots__
    │   │       │   ├── email.ui-test.js
    │   │       │   ├── password.ui-test.js
    │   │       │   └── setAccount.ui-test.js
    │   │       ├── email.ui.js
    │   │       ├── password.ui.js
    │   │       ├── setAccount.actions.js
    │   │       ├── setAccount.container.js
    │   │       ├── setAccount.reducer.js
    │   │       ├── setAccount.styles.js
    │   │       └── setAccount.ui.js
    │   ├── profile
    │   │   ├── __tests__
    │   │   │   ├── __snapshots__
    │   │   │   ├── profile.reducer-test.js
    │   │   │   └── profile.ui-test.js
    │   │   ├── profile.actions.js
    │   │   ├── profile.constants.js
    │   │   ├── profile.container.js
    │   │   ├── profile.reducer.js
    │   │   ├── profile.styles.js
    │   │   ├── profile.ui.js
    │   │   ├── profileForm
    │   │   │   ├── __tests__
    │   │   │   │   └── profileForm-test.js
    │   │   │   ├── profileForm.container.js
    │   │   │   ├── profileForm.selectors.js
    │   │   │   ├── profileForm.styles.js
    │   │   │   └── profileForm.ui.js
    │   │   └── profileSaveButton
    │   │       ├── __tests__
    │   │       │   ├── __snapshots__
    │   │       │   └── profileSaveButton-test.js
    │   │       └── profileSaveButton.js
    │   ├── session
    │   │   ├── __tests__
    │   │   │   ├── __snapshots__
    │   │   │   ├── session-test.js
    │   │   │   └── session.reducer-test.js
    │   │   ├── components
    │   │   │   ├── SessionDescription.js
    │   │   │   ├── SessionFooter.js
    │   │   │   ├── SessionHeader.js
    │   │   │   ├── SessionTimesModal.js
    │   │   │   └── __tests__
    │   │   │       ├── SessionDescription-test.js
    │   │   │       ├── SessionFooter-test.js
    │   │   │       ├── SessionHeader-test.js
    │   │   │       ├── SessionTimesModal-test.js
    │   │   │       └── __snapshots__
    │   │   ├── session.actions.js
    │   │   ├── session.constants.js
    │   │   ├── session.container.js
    │   │   ├── session.reducer.js
    │   │   ├── session.selectors.js
    │   │   ├── session.styles.js
    │   │   └── session.ui.js
    │   └── timeline
    │       ├── __tests__
    │       │   ├── __snapshots__
    │       │   ├── fixtures
    │       │   │   └── timeline-fixture.js
    │       │   ├── timeline-test.js
    │       │   └── timeline.reducer-test.js
    │       ├── components
    │       │   ├── __tests__
    │       │   │   ├── __snapshots__
    │       │   │   ├── checkIn-test.js
    │       │   │   └── feedback-test.js
    │       │   ├── checkIn.ui.js
    │       │   ├── feedback.styles.js
    │       │   └── feedback.ui.js
    │       ├── timeline.actions.js
    │       ├── timeline.container.js
    │       ├── timeline.reducer.js
    │       ├── timeline.styles.js
    │       └── timeline.ui.js
    ├── hocs
    │   ├── __tests__
    │   │   ├── __snapshots__
    │   │   └── withValidationMessage-test.js
    │   └── withValidationMessage.js
    ├── images
    ├── lib
    │   ├── __tests__
    │   │   └── lodashMixins-test.js
    │   ├── analytics.js
    │   ├── customMarkdownRules.js
    │   ├── inputValidations.js
    │   ├── lodashMixins.js
    │   ├── loggingHelpers.js
    │   ├── requestHelpers.js
    │   └── utils.js
    ├── reducers.js
    ├── router.js
    ├── scenes.js
    ├── store
    │   └── configureStore.js
    ├── styles
    │   ├── colors.js
    │   ├── common.js
    │   └── styles.js
    └── test-config
        ├── enzyme-config.js
        └── setup.js

Answer 1

这不是 React Native 项目的默认名称，而可能只是一种约定或习惯。您可以坚持使用不同类型的目录结构方法，也可以使用 React Community 中的 create-react-native-app并检查该工具如何创​​建目录结构。提示:没有目录结构:)所以，一切都完全取决于你。

当然这只是基本结构，根据您的需要(例如actions、Redux的reducers目录(如果您将使用的话)、config、api等)您可以组织自己的目录。