Обзор структуры проекта в React Native — основные файлы и директории

Введение: структура проекта

Итак, вы уже видели, как создаётся проект React Native. Наша задача сегодня — разобраться в структуре проекта, понять, какие папки и файлы тут есть, за что они отвечают и как это всё использовать в реальной разработке.

Разрабатывать приложение React Native проще и быстрее, когда вы понимаете, как устроен проект. Это как с рыбой — одно дело её съесть, другое — понять, как её ловить. Мы разберём основные папки и файлы, чтобы вы могли:

1. Знать, где находится важная функциональность.
2. Уметь правильно структурировать свои компоненты, стили и ресурсы.
3. Чувствовать себя уверенно при необходимости добавления новых зависимостей или настройки проекта.

Общая структура проекта React Native

После выполнения команды npx react-native init <ProjectName> создаётся стандартная структура, в которой есть несколько ключевых папок и файлов. Вот как она выглядит:

<ProjectName>
├── android/
├── ios/
├── node_modules/
├── src/
├── .babelrc
├── .eslintrc.js
├── .gitignore
├── App.js
├── app.json
├── babel.config.js
├── index.js
├── metro.config.js
├── package.json
├── yarn.lock / package-lock.json

Теперь пройдёмся по этим элементам более подробно.

Основные директории

android/

Эта папка содержит весь исходный код и конфигурационные файлы для Android-приложения. Внутри находятся следующие важные элементы:

• android/app/src/main/AndroidManifest.xml — основной файл настроек Android-приложения. Здесь можно настроить название приложения, разрешения и т.д.
• android/app/build.gradle — файл сборки Gradle, в котором прописаны зависимости для Android.
• android/gradle.properties — файл конфигурации Gradle, используемый для задания ключей и других параметров.

Если вы хотите кастомизировать приложение под Android, например добавить сторонний модуль на Java/Kotlin, все изменения будут происходить здесь.

ios/

Эта папка аналогична папке android/, но для iOS-приложений. Важные файлы:

• ios/<ProjectName>.xcodeproj — проект для Xcode. Именно с ним вы будете работать, если знаете Swift/Objective-C и хотите внести изменения в iOS-приложение.
• ios/Info.plist — файл настроек приложения для iOS, где можно задать идентификатор приложения, права доступа и прочее.

Файлы в этой директории важны, если вы захотите интегрировать нативные модули для iOS.

node_modules/

Эта папка содержит все зависимости, которые установлены через npm или yarn. Здесь живут библиотеки как React, React Native, так и другие, которые вы подключите в будущем.

src/

Эту папку, возможно, вы ещё не видели. Она не создаётся автоматически, но её рекомендуется использовать для вашего кода. Внутри src/ мы будем размещать:

• Компоненты components/
• Экраны screens/
• Стили styles/
• Логику utils/
• API-запросы api/

Зачем? Чтобы структура была ясной и проект был удобным для масштабирования. Наша цель — порядок, а не хаос.

Основные файлы

App.js

App.js — это главный компонент приложения. Именно он рендерится при запуске. Вот, как он выглядит в стандартном проекте:

import React from 'react';
import { SafeAreaView, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <Text>Welcome to React Native!</Text>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

App.js идеален для рендера корневого компонента. Дальше мы будем делить логику на экраны и компоненты, чтобы не перегружать этот файл.

index.js

Файл index.js — точка входа вашего приложения. Он запускает App-компонент:

{
  "name": "ProjectName",
  "displayName": "ProjectName"
}

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

app.json

Файл конфигурации приложения. Простая структура:

{
  "name": "ProjectName",
  "displayName": "ProjectName"
}

Если вы хотите изменить имя приложения или его отображаемое название, это можно сделать здесь.

metro.config.js

Это файл конфигурации для Metro Bundler — сборщика, который используется React Native для компиляции вашего приложения. В большинстве случаев его не нужно редактировать, но если вы захотите добавить нестандартный путь к ресурсам, например шрифты, то изменения будут происходить здесь.

package.json

Файл с информацией о вашем проекте и его зависимостях. Пример:

{
  "name": "ProjectName",
  "version": "0.0.1",
  "main": "index.js",
  "dependencies": {
    "react": "17.0.2",
    "react-native": "0.70.0"
  }
}

Вы будете часто обращаться к package.json, чтобы добавлять зависимости или настраивать скрипты.

Организация кода и компонентов

После того как мы разобрались с предустановленной структурой, давайте поговорим о том, как её можно улучшить.

Рекомендации по структуре проекта

Создайте папку src/ и разделите её на логику, компоненты и ресурсы. Пример структуры:

src/
├── components/
├── screens/
├── styles/
├── utils/
├── api/

Пример структуры компонентов

Папка components/ может выглядеть так:

src/components/
├── Button/
│   ├── Button.tsx
│   ├── Button.styles.ts
│   └── index.ts
├── Header/
│   ├── Header.tsx
│   ├── Header.styles.ts
│   └── index.ts

Приведённый подход позволяет хорошо изолировать логику каждого компонента.