React Native
Эта статья помогает выбрать рабочий формат старта и не застрять в настройке окружения. Полный практический курс с примерами кода — Первая программа на React Native. База по веб-React — 272 и галерея компонентов (Lab). Альтернатива на Dart — Flutter и готовые виджеты (Lab).
Учебный маршрут
| Тема | Где в курсе | Кратко |
|---|---|---|
| Окружение и проект | Первая программа на React Native — установка | Node LTS, create-expo-app, Expo Go |
| Компоненты и Flexbox | Первая программа на React Native — UI | View, Text, StyleSheet, flex |
| Состояние, пропсы, списки | Первая программа на React Native — данные | useState, FlatList |
| Навигация | Первая программа на React Native — экраны | React Navigation, navigate / params |
| API и хранилище | Первая программа на React Native — сеть и диск | fetch, AsyncStorage |
| Сборка и Store | ниже и Публикация Android-приложения | EAS Build, AAB/APK, подпись |
Порядок для продукта:
- Быстрый вход через Expo — прототип на телефоне за минуты.
- Bare workflow или
expo prebuild— кастомные нативные модули. - Release и публикация — Публикация Android-приложения.
Где применяют React Native
Старт: Первая программа на React Native · Expo · Первая программа на Expo.
React Native — это фреймворк с открытым исходным кодом, созданный компанией Meta (ранее Facebook), который позволяет создавать нативные мобильные приложения для iOS и Android, используя JavaScript или TypeScript. Технология базируется на библиотеке React, что обеспечивает знакомый подход к созданию пользовательских интерфейсов через компоненты. Разработчики пишут код один раз, а фреймворк компилирует его в нативные элементы управления операционной системы, обеспечивая высокую производительность и плавность работы.
Архитектура решения строится на разделении логики приложения и представления. Основной процесс выполняется в потоке JavaScript, который обрабатывает бизнес-логику и состояние данных. Отдельный нативный поток отвечает за рендеринг интерфейса и взаимодействие с аппаратными средствами устройства. Связь между этими потоками осуществляется через мост (bridge) или новую архитектуру TurboModules и Fabric, что минимизирует задержки при передаче данных.
Приложение на React Native состоит из набора компонентов, каждый из которых соответствует стандартному элементу UI в iOS или Android. Компоненты View, Text и Image отображают контейнеры, текст и изображения соответственно. Эти элементы наследуют свойства и поведение нативных аналогов, такие как анимация, тач-события и доступ к камере. Гибкость подхода позволяет создавать сложные интерфейсы, которые выглядят и ведут себя как родные приложения платформы.
Экосистема React Native включает в себя множество готовых библиотек для расширения функциональности. Библиотеки предоставляют доступ к геолокации, Bluetooth, Push-уведомлениям и другим системным функциям. Сообщество разработчиков активно поддерживает проект, создавая инструменты для отладки, тестирования и оптимизации. Это снижает время разработки и упрощает поддержку проекта в долгосрочной перспективе.
Особенности технологии и архитектура выполнения
Основная особенность React Native заключается в использовании единого языка программирования JavaScript для обеих платформ. Разработчик использует синтаксис и возможности JS/TS для написания всего кода приложения. Фреймворк транслирует JSX-разметку в вызовы нативных API. Этот процесс происходит во время сборки или запуска приложения. Результатом является приложение, которое взаимодействует с операционной системой напрямую, минуя веб-вью.
Механизм выполнения кода отличается от традиционных гибридных приложений. В гибридных решениях интерфейс рендерится внутри встроенного браузера (WebView). React Native не использует WebView для отображения контента. Вместо этого он создает реальные нативные виджеты. Это обеспечивает доступ к полной мощности устройства и высокую скорость отклика интерфейса. Анимации выполняются в отдельном потоке, что предотвращает блокировку основного потока JavaScript.
Управление состоянием в React Native реализуется через концепцию состояния (state) и пропсов (props). Состояние хранит данные, которые могут меняться со временем. При изменении состояния компонент перерисовывается автоматически. Пропсы передают данные от родительского компонента к дочернему. Этот подход делает код предсказуемым и упрощает отладку. Библиотека Redux или Context API часто используется для управления глобальным состоянием в крупных проектах.
Существует два основных режима работы с фреймворком: Expo Managed Workflow и Bare Workflow. Режим Expo позволяет использовать готовые конфигурации и сервисы без глубокой настройки окружения. Это идеальный вариант для быстрого старта и прототипирования. Приложение работает в среде Expo Go или собирается через облачные сервисы EAS. Bare Workflow требует ручной настройки нативных модулей и подключения библиотек. Этот режим дает полный контроль над кодом и позволяет интегрировать любые сторонние библиотеки.
Новая архитектура React Native внедряет компоненты под названием Fabric и новые мосты. Fabric отвечает за рендеринг и обновление интерфейса в реальном времени. Новые мосты ускоряют передачу данных между JavaScript и нативным кодом. Это устраняет узкие места старой архитектуры и повышает общую производительность. Обновление до новой версии требует проверки совместимости всех используемых библиотек.
Базовые компоненты и Flexbox
Интерфейс собирают из примитивов RN — View (контейнер), Text (весь видимый текст), Image, Pressable, TextInput, ScrollView, для длинных списков — FlatList. Стили задают объектами через StyleSheet.create, а не CSS-файлами.
Вёрстка строится на Flexbox — у контейнера flexDirection (column по умолчанию), justifyContent, alignItems, у дочерних — flex: 1, чтобы занять оставшуюся высоту экрана. Подробные таблицы и пример карточки — в Первая программа на React Native.
Состояние, пропсы и списки
Локальное состояние экрана — хук useState; при изменении React перерисовывает компонент. Данные сверху вниз передают пропсами в дочерние компоненты (только чтение внутри ребёнка). Для списков из API или БД используйте FlatList с keyExtractor и renderItem, а не ScrollView с map на сотнях строк.
Примеры счётчика, Greeting с пропсами и списка задач — Первая программа на React Native. Глобальное состояние в крупных приложениях — Context API, Zustand или Redux (как и в веб-React).
Навигация между экранами
Один файл App.js быстро упирается в лимит. Стандарт — React Navigation (@react-navigation/native + stack/tabs) или Expo Router (файлы в app/ = маршруты). Переход: navigation.navigate('Screen', { id }), параметры на экране — route.params, возврат — goBack().
Установка и минимальный стек из двух экранов — Первая программа на React Native.
API и локальное хранилище
Сеть — тот же fetch (или axios), часто вместе с useEffect и состояниями loading / error. Для настроек и кэша подойдёт AsyncStorage; токены и секреты — expo-secure-store; большие офлайн-данные — SQLite (expo-sqlite).
Рабочий пример загрузки JSON и сохранения флага онбординга — Первая программа на React Native. Для локального API на телефоне укажите IP компьютера в Wi‑Fi, а не 127.0.0.1.
Установка компонентов и настройка окружения
Первый шаг — Node.js LTS и проверка окружения:
node -v
npx react-native info
Современный подход — npx без глобального react-native-cli. Создание проекта Expo (шаблон blank):
npx create-expo-app my-mobile-app --template blank
cd my-mobile-app
Альтернатива — Bare Workflow (нужны Xcode и/или Android Studio, дольше по времени):
npx @react-native-community/cli@latest init MyMobileApp
cd MyMobileApp
Для iOS запустите симулятор в Xcode; для Android создайте AVD в Android Studio. Установите актуальный JDK.
Создание первого приложения пошагово
Процесс запуска начинается в каталоге с package.json:
npx expo start
Сервер сканирует проект, загружает зависимости и открывает окно с QR-кодом. Этот код служит ключом для подключения мобильного устройства.
Подключение устройства осуществляется через приложение Expo Go. Пользователь открывает камеру телефона и сканирует QR-код на экране компьютера. Приложение автоматически определяет IP-адрес сервера и начинает загрузку кода. Первая сборка может занять несколько минут. После загрузки на экране телефона появится стартовый экран приложения. Изменения в коде будут отражаться мгновенно благодаря механизму горячей перезагрузки.
Редактирование кода происходит в файле App.js. Этот файл является точкой входа в приложение. Внутри него находятся основные компоненты и логика отображения. Можно изменить текст приветствия, добавить новые кнопки или изменить цвета. Сохранение файла в редакторе кода вызывает автоматическое обновление на устройстве. Не нужно перезапускать приложение вручную после каждого изменения.
Структура проекта содержит папку src для организации кода. Сюда можно вынести компоненты, хуки и утилиты. Импорты файлов осуществляются через относительные пути. Путь указывает на расположение файла относительно текущего. Правильная организация файлов упрощает навигацию по коду. Использование папок components, screens и utils помогает поддерживать порядок в проекте.
Остановка сервера разработки выполняется комбинацией клавиш Ctrl+C в терминале. Это освобождает порт и завершает процесс. Перезапуск команды возобновляет работу. Если возникает ошибка, сервер предлагает варианты её исправления. Часто проблема кроется в синтаксической ошибке или отсутствии импорта. Логи ошибок выводятся прямо в терминале и помогают быстро найти причину сбоя.
Структура проекта и управление зависимостями
Проект React Native имеет четкую иерархию файлов и директорий. Корневая папка содержит файлы конфигурации и метаданные. Файл package.json описывает зависимости проекта и скрипты запуска. Секция dependencies содержит библиотеки, необходимые для работы приложения. Секция devDependencies включает инструменты для разработки, такие как линтеры и тестеры.
Файл app.json (в Expo) или android/app/build.gradle и ios/Podfile (в Bare) определяют настройки сборки. Здесь указываются название приложения, версия, иконка и разрешения. Конфигурация позволяет адаптировать приложение под разные платформы. Например, можно задать уникальное имя пакета для Android и iOS. Это важно для публикации в магазинах приложений.
Зависимости (Expo подбирает совместимые версии SDK):
npx expo install <имя_пакета>
# или — npm install <имя_пакета>
Система обновляет package-lock.json или yarn.lock. Эти файлы фиксируют точные версии установленных пакетов. Клонирование репозитория требует только одной команды для восстановления окружения. Это гарантирует идентичность условий разработки на разных машинах.
Организация кода внутри проекта следует принципу модульности. Компоненты разделяются по функциональному признаку. Общие стили выносятся в отдельные файлы. Утилиты группируются в папку helpers. Хуки React собираются в папку hooks. Такая структура облегчает поиск нужного кода и повторное использование элементов. Импорт компонентов осуществляется через явное указание пути.
Запуск и тестирование на устройствах
Тестирование на реальном устройстве является критически важным этапом разработки. Эмуляторы не всегда точно воспроизводят поведение физических смартфонов. Проблемы с сенсорным экраном, работой батареи или датчиками могут остаться незамеченными. Реальное устройство позволяет проверить производительность и удобство использования.
Подключение к физическому устройству требует настройки USB-отладки. Для Android включается режим разработчика в настройках телефона и активируется отладка по USB. Для iOS требуется подключить устройство к компьютеру Mac и доверить ему. Приложение Expo Go автоматически обнаруживает подключенное устройство. Код загружается и запускается без необходимости ручной сборки.
Отладка кода производится через инструменты Chrome DevTools. В терминале появляется ссылка на веб-интерфейс. Открытие ссылки позволяет просматривать логи, переменные и стек вызовов. Можно ставить точки останова и отслеживать выполнение функций. Это помогает находить ошибки в логике приложения. Встроенные средства отладки React Native также доступны через меню в самом приложении.
Работа с разными версиями операционных систем требует проверки на нескольких устройствах. Некоторые функции могут работать иначе на старых версиях iOS или Android. Тестирование должно включать проверку на актуальных и устаревших платформах. Это обеспечивает широкую совместимость приложения. Автоматические тесты помогают выявить регрессии при обновлении кода.
Сборка и публикация приложения
Финальная сборка превращает исходный код в установочный файл для магазинов приложений. Для этого используется сервис EAS Build или локальные инструменты сборки. Сервис принимает проект, компилирует его на удаленных серверах и выдает готовые бинарные файлы. Это избавляет от необходимости иметь мощное оборудование для сборки.
Сборка через EAS:
eas login
eas build --platform android # или ios
Профиль сборки определяет настройки подписи и версию SDK. Подпись приложения необходима для доверия со стороны магазинов.
Файлы сборки имеют разные форматы для каждой платформы. Для Android это APK или AAB файл. Для iOS это IPA файл. Эти файлы загружаются в TestFlight для iOS или Google Play Console для Android. Магазины приложений проводят проверку соответствия правилам и выпускают приложение пользователям. Публикация требует соблюдения строгих требований к контенту и безопасности.
Обновление приложения происходит через магазины приложений. Пользователи получают уведомление о доступности новой версии. Автоматическая проверка версий позволяет контролировать распространение исправлений. Процесс обновления прозрачен для конечного пользователя. Разработчик получает статистику загрузок и отзывов.
Подпись release, RuStore, Google Play и раздача APK с сайта: Публикация Android-приложения.
Локальная сборка Android (bare workflow или после expo prebuild) заметно сложнее, чем у .NET MAUI или нативного Kotlin-проекта. Общее сравнение стеков — в Сборке и развёртывании.
Сборка Android — почему цепочка капризная
Release —
| Этап | Инструмент | Что может сломаться |
|---|---|---|
| JS | Metro | бандл, кэш, версии пакетов |
| Сборка APK | Gradle + AGP | JDK, кэш, зависимости |
| Обёртка | Kotlin/Java | autolinking, конфликт модулей |
| JS на устройстве | Hermes | несовместимость с New Architecture |
| Нативный код | NDK/CMake | длинные пути в Windows, prefab |
Windows: node_modules, кэш Gradle и NDK легко дают пути > 260 символов → Filename longer than 260 characters. Помогают короткий каталог проекта, subst на диск, отдельный GRADLE_USER_HOME, сборка только под arm64-v8a для одного телефона.
JDK: для Android Gradle надёжнее 17 или 21. Java 24 часто даёт странные ошибки и таймаут daemon.
Инкрементальная сборка: после смены newArchEnabled или списка ABI сделайте cd android && ./gradlew clean, затем полную пересборку.
Облачный EAS Build снимает часть боли на Windows, но локальная отладка нативных модулей всё равно потребует рабочего Gradle-окружения.
Частые ошибки
| Симптом | Причина |
|---|---|
| Metro bundler failed | Кэш: npx react-native start --reset-cache |
| Красный экран | JS-ошибка — смотрите LogBox / DevTools |
| Нативный модуль не найден | Не выполнен pod install (iOS) или rebuild |
| UI "не как на iOS" | Стили платформенные — проверьте Platform.OS |
Filename longer than 260 characters | Длинный путь в Windows — короче проект / subst, см. Сборка и развёртывание мобильных приложений |
| Gradle daemon timeout | JDK 24 или мало памяти — JDK 21, org.gradle.jvmargs |
| Сборка "зависла" после смены архитектуры | ./gradlew clean в android/ |
Что попробовать
- Пройти Первая программа на React Native от
create-expo-appдоFlatListи React Navigation. - Загрузить список с API и сохранить настройку в AsyncStorage.
eas build+ публикация Android во internal testing.