Введение

React Native — это мощная среда для создания мобильных приложений с использованием JavaScript и React. Погружаясь в разработку с помощью React Native, важно понимать структуру типичного проекта React Native. Каждая папка и файл имеют определенную цель, и знание их ролей поможет вам более эффективно управлять проектом и перемещаться по нему. В этой статье представлен подробный обзор структуры папок приложения React Native с упором на содержимое и назначение основных каталогов: корневого каталога, папки android/ и папки ios/.

Корневая директория

Корневой каталог проекта React Native содержит важные файлы и папки, которые управляют зависимостями, конфигурацией и точкой входа проекта.

Ключевые файлы и папки

• node_modules/: содержит все зависимости и подзависимости, установленные через npm или Yarn. Обычно вам не нужно напрямую касаться этой папки.
• package.json: список зависимостей вашего проекта, скриптов и других метаданных. Это крайне важно для управления зависимостями проекта и сценариями.
• package-lock.json или Yarn.lock: блокирует версии установленных зависимостей, обеспечивая согласованность в различных средах.
• index.js: точка входа для вашего приложения React Native, обычно регистрирующая основной компонент приложения.

Основные папки

• android/: содержит собственный код Android и файлы конфигурации, необходимые, если вам нужно написать или изменить собственный код Android.
• ios/: содержит собственный код iOS и файлы конфигурации, необходимые для написания или изменения собственного кода iOS.
• app/ или src/: часто это основная папка для вашего кода JavaScript/TypeScript, такого как компоненты, экраны и сервисы. Здесь находится большая часть кода вашего приложения.

Общие подпапки (внутри приложения/ или src/)

• компоненты/: повторно используемые компоненты пользовательского интерфейса, помогающие организовывать и повторно использовать элементы пользовательского интерфейса в разных частях приложения.
• экраны/: компоненты, представляющие различные экраны или представления, упрощающие управление навигацией и отдельными экранами.
• navigations/: конфигурация и компоненты навигации, используемые для определения структуры навигации приложения.
• assets/: изображения, шрифты и другие статические ресурсы, позволяющие организовать все статические ресурсы.
• redux/ (при использовании Redux для управления состоянием): действия, редукторы и конфигурация хранилища для управления глобальным состоянием приложения.
• стили/: общие стили, используемые в компонентах и ​​экранах, помогают поддерживать единообразный дизайн и упрощают управление стилями.

Конфигурационные и служебные файлы

• .babelrc или Babel.config.js: файл конфигурации Babel, определяющий, как Babel транспилирует ваш код.
• .eslintrc.js: файл конфигурации ESLint, настраивающий правила проверки для вашего проекта.
• .prettierrc: Более красивый файл конфигурации, настраивающий правила форматирования кода.
• metro.config.js: файл конфигурации для упаковщика Metro, упаковщика JavaScript, используемого React Native.
• .gitignore: указывает, какие файлы и каталоги игнорировать в вашем репозитории git.

Андроид/Папка

Папка android/ содержит весь собственный код Android и файлы конфигурации, необходимые для создания и запуска приложения React Native на устройстве Android или в эмуляторе.

Ключевые файлы и папки

• build.gradle: файл сборки верхнего уровня, в который можно добавить параметры конфигурации, общие для всех подпроектов/модулей.
• gradle.properties: свойства конфигурации для системы сборки Gradle.
• gradlew и gradlew.bat: сценарии для запуска команд Gradle в системах на базе Unix и Windows соответственно.
• settings.gradle: указывает модули проекта, включая любые внешние библиотеки или дополнительные модули, от которых может зависеть ваш проект.

Подпапки

приложение/

• build.gradle: файл сборки модуля приложения, содержащий конфигурации и зависимости, специфичные для вашего приложения.
• src/: содержит исходный код Android-части вашего приложения.
  • основной/:
  • AndroidManifest.xml: описывает важную информацию о вашем приложении для инструментов сборки Android, операционной системы Android и Google Play.
  • java/: содержит исходные файлы Java или Kotlin, включая MainActivity.java или MainActivity.kt, точку входа приложения.
  • res/: содержит ресурсы приложения, такие как макеты, файлы рисования (изображения), строки и другие XML-файлы, используемые приложением.
  • assets/: хранит необработанные файлы ресурсов, необходимые вашему приложению, например шрифты или другие двоичные файлы.
  • jniLibs/: содержит предварительно скомпилированные собственные библиотеки (файлы .so), от которых зависит ваше приложение.

градиент/

• wrapper/: содержит файлы, помогающие работать с системой сборки Gradle.
  • gradle-wrapper.jar: файл JAR для оболочки Gradle, позволяющий создавать проект, не требуя от пользователей установки Gradle.
  • gradle-wrapper.properties: указывает используемую версию Gradle и другие свойства.

Папка ios/

Папка ios/ содержит весь собственный код iOS и файлы конфигурации, необходимые для создания и запуска приложения React Native на устройстве или симуляторе iOS.

Ключевые файлы и папки

• Podfile: определяет зависимости для iOS-части вашего приложения React Native, управляемого CocoaPods.
• Podfile.lock: блокирует версии зависимостей, указанных в подфайле, обеспечивая согласованность в различных средах.
• .xcworkspace: файл рабочей области, созданный CocoaPods, который вы используете для открытия своего проекта в Xcode.
• .xcodeproj: файл проекта Xcode, содержащий настройки и информацию о проекте вашего приложения.

Подпапки

/

• AppDelegate.m или AppDelegate.swift: управляет событиями и состояниями уровня приложения, точкой входа для приложения iOS.
• Info.plist: содержит информацию о конфигурации приложения, такую ​​как идентификатор пакета, имя приложения, разрешения и другие настройки.
• Assets.xcassets/: содержит изображения и значки приложения.
• Base.lproj/: содержит основную раскадровку или файл экрана запуска (LaunchScreen.storyboard).
• main.m или main.swift: основная точка входа для приложения, настройка объекта приложения и делегата приложения.
• Вспомогательные файлы/: Содержит дополнительные ресурсы и конфигурации, такие как права и связующие заголовки (при использовании Swift).

Заключение

Понимание структуры папок приложения React Native имеет решающее значение для эффективного управления проектами и разработки. Каждая папка и файл выполняют определенную роль: от управления зависимостями и конфигурациями до содержания кода и ресурсов для платформ Android и iOS.