Введение
React Native - это фреймворк на котором можно разрабатывать мобильные приложения с помощью React. Он выполняет роль ReactDOM в среде мобильных прилоежний и позволяет общаться с устройством через своего внутреннего посредника.
React Native предоставляет
- набор компонентов, которые преобразуются в нативные
- API для работы с нативными возможностями ОС
- движок, который принимает запросы из JS на выполнение нативной логики
Настройка окружения
Для работы React Native приложения нам понадобится NodeJs.
Скачиваем AndroidStudio.
После скачаивания и установки всех пакетов, нам нужно будет выбрать эмулятор устройства. Стоить выбирать устройства с поддержкой PlayStore для поддержки его API.
Далее выбираем операционную систему UpsideDownCake.
Далее мы сможем создать виртуальное устройство.
Ну и в менеджере устройств остаётся выбрать только наше нужное устройство.
На наше физическое мобильное устройство нужно будет установить ExpoGo, чтобы у нас была возможность удобно разрабатывать наш проект и тестировать его на реальном устройстве.
Старт
Как работает React Native
Для взаимодействия React с браузером используется дополнительная библиотека — ReactDOM. Подобную роль для мобильных устройств выполняет React Native, позволяя React работать с нативными компонентами операционных систем (именно что компоненты RN берёт нативные от каждого устройства).
UI и логика
В RN в
- качестве блока используется View, который в рантайме переходит в UIView (iOS) и в ViewGroup (Android)
- качестве текста используется Text, который так же переходит в UITextView и TextView соответственно
JSX существует только в рамках разработки. Вся остальная JS логика остаётся существовать в рантайме и переводится уже самим RN в нативные вызовы.
Есть два вида аръитектуры RN-приложений, которые сложились со временем.
Первая архитектура предполагает то, что наш скомпилированный JS-код будет взаимодействовать с Bridge, который будет сообщать нативному устройству, какие API дёргаются и какие нативные компоненты рендерядтся.
У нас имеется поток JS, внутри которого исполняется JS и отправляет запросы на Bridge. Поток работает на основе JavaScript Core - это движок, который запускает JS на мобильном устройстве.
Через Bridge у нас запросы отправляются в нативный поток. Нативный поток работает с целевой платформой. Он запускает в себе сразу все компоненты приложения (даже те, которые сейчас могут не использоваться во время загрузки).
Нативная платформа общается с теневым потоком, который стилизует нативные компоненты под те, что мы реализовали в JSX.
Основными недостатками данной архитектуры являются:
- Bridge, который сереализует / десереализует сообщения и может тормозить отрисовку UI
- Так же Bridge асинхронен, поэтому даже синхронные компоненты будут вызваться асинхронно
- Все потоки никак не связаны друг с другом. Они не представляют, что происходит друг в друге.
В новой архитектуре у нас так же остаются три потока, но вместо одного Bridge, у нас появляется JSInterface, который позволяет общаться с нативными интерфейсами без пересылки сообщений. Всё ядро общения построено на биндингах C++. Интерфейс может быть как синхронным, так и асинхронным.
Fabric - это новый компонент, который синхронизирует дерево из JS и отображение в Layout.
Turbo Modules - это пакет с модулями, которые не загружаются при первой загрузке приложения (по типу камеры, bluetooth, nfc)
CodeGen - это генератор интерфейса на C++, который взаимодействует с модулями посредников и собирает описанный компонент.
EXPO CLI vs RN CLI
Expo - это удобный инструмент для работы с RN. Он предоставляет свои компоненты и роутинг. Он предоставляет платные услуги, но всё доступно и в бесплатном режиме.
RN - это нативный CLI, который может быть полезен для более гибкого написания нативных компонентов, но с ним тяжелее работать. Лучше дефолтно его не использовать.
Из Expo можно одной командой перейти в RN, а обратно уже нет.
Старт проекта + Обзор проекта
Устанавливаем наш свежий проект
npx create-expo-app@latest rn-simple-appИ далее перед нами открывается большая структура. В файле app.json находится начальный конфиг приложения, в котором указано, что, откуда и какие ресурсы нужно брать для сборки приложения, а так же его начальные настройки.
