React Native Hybrid Разработка и внедрение

о

• Публичный аккаунт WeChat: внешний обруч (Love-FED)
• мой блог:Блог Рауба
• Знать столбец:передний обруч

предисловие

вместе сReactраспространенность его мобильной среды разработкиReact NativeОн также получил одобрение большинства разработчиков, именуемых в дальнейшем РН. С помощью RN мы можем использовать язык JavaScript для реализации разработки кроссплатформенных мобильных приложений, что открывает перед инженерами по интерфейсу доступ к мобильным платформам. Используя официальное введение RN, чтобы обобщить его характеристики:Learn once, write anywhere.

Если вы знаете React, изучение RN должно быть довольно простым. Поскольку RN и React используют один и тот же язык разработки JavaScript и одинаковую концепцию дизайна React, базовая поддержка нативной платформы добавляется на основе React. Таким образом, RN занимается адаптацией различных платформ, и разработчикам нужно только уделять внимание разработке приложений для самой платформы RN.

В этой статье будут представлены принцип и реализация гибридной разработки RN (взаимодействие с платформами iOS и Android) в сочетании с блок-схемой, которая позволит вам лучше понять идею и основную логику разработки RN.

Принцип и реализация

1. Начните с Привет, мир

Давайте сначала посмотрим на простое отображение Hello world, реализованное с использованием RN:

Выше мы можем легко увидеть знакомый синтаксис React, но в дополнение мы можем видеть, что он представленreact-nativeКомпоненты AppRegistry API и Text в библиотеке — это API и компоненты, которые RN предоставляет нам для вызова собственной платформы, которая может реализовывать согласованные функции и логику на разных мобильных устройствах. Последним, что отображается в приложении, является текст Hello world, а API AppRegistry будет представлен позже.

2. Расшифровка структуры приложения React Native

Затем, прочитав пример Hello world, мы должны примерно знать структуру приложения RN Мы используем легенду для объяснения анализа, как показано на следующем рисунке:

Как видно из фигуры, наше наше приложение Rn можно разделить на два слоя:

• Уровень кода JavaScript
• Слой собственного кода

Его также можно понимать как так называемый прикладной уровень и нижний уровень. прикладной уровень черезJavaScript 桥接层Взаимодействуйте с базовой платформой, чтобы получить собственные API, компоненты пользовательского интерфейса и некоторые пользовательские компоненты базовой платформы. Например, API AppRegistry и компонент Text, представленные в примере Hello world, являются хорошими примерами.

Такое разделение может сделать разработку прикладного уровня простой, эффективной и кроссплатформенной, а стабильность и производительность приложения останутся близкими к исходной платформе.

3. Нативная платформа вызывает компоненты React Native

Получив общее представление о структуре приложения React Native, давайте посмотрим, как нативная платформа вызывает компоненты React Native. Чтобы запустить код нашего RN в нативном APP, нативное APP должно загрузить и запустить соответствующие компоненты RN для реализации функций гибридной разработки и взаимодействия. Здесь мы представим только что отложенный API AppRegistry.

Как правило, наш проект RN будет иметь входной файл, такой как index.js (в старой версии их два: index.ios.js и index.android.js), для регистрации корневого компонента и предоставления его собственной платформе для бегать. Корневой компонент регистрации здесь реализован через AppRegistry API.

Нам нужно вызвать AppRegistry в корневом компонентеregisterComponentспособ регистрации компонента. После регистрации нативную платформу можно пройтиrunApplicationспособ запуска зарегистрированного корневого компонента. Следует отметить, что имена зарегистрированных и запущенных компонентов должны совпадать, чтобы можно было загрузить соответствующие компоненты. Например, в примере Hello world корневой компонент, который мы зарегистрировали, называется HelloWorldApp, и внедряется соответствующий компонентный модуль. Кроме того, мы также можем зарегистрировать несколько корневых компонентов в одном файле ввода.

4. Загрузите React Native UI изначально

Функция загрузки соответствующего корневого компонента упоминалась, когда нативная платформа только что вызывала компонент RN. Так правда ли, что нативная платформа может загружать разные страницы только в первый раз, постоянно вызывая и запуская корневой компонент, зарегистрированный RN (под загрузкой здесь понимается изначальное открытие страницы RN)? ответ отрицательный.

В дополнение к вышесказанному, вызывая различные корневые компоненты для открытия различных интерфейсов RN изначально (вторая точка на рисунке), мы также можем вызвать корневой компонент для достижения этой цели. Единственное отличие состоит в том, что нам нужно добавить идентификационные биты, чтобы различать разные интерфейсы в initialProperties, чтобы отображать разные компоненты при вызове, точно так же, как переход на один и тот же маршрут с разными параметрами в URL, и соответствующие компоненты на уровне приложения в соответствии с параметрами на отрисовка маршрута.

В корневом компоненте RN мы можем передатьthis.propsПолучите объект параметра, переносимый собственной платформой, такой как viewName в примере, а затем реализуйте рендеринг внутренних компонентов RN в соответствии с viewName.Конечно, его также можно комбинироватьreact-navigationДобиться переключения модулей маршрутизации. Что касается того, каким образом загружать, то решение все равно зависит от разделения бизнеса и определения функций. Для сравнения, первый может быть более гибким и удобным.

5. Принцип связи между React Native и нативной платформой

В режиме гибридной разработки нам неизбежно нужно передавать данные с нативной платформой, поэтому в RN, как мы взаимодействуем с нативной платформой? Как получить данные, предоставленные собственной платформой, или передать данные на собственную платформу? На рисунке ниже показан этот процесс.

В RN мы можем ссылаться на реактивный модульNativeModulesAPI используется для передачи данных. Метод вызова — NativeModules.Module name.Interface name, а собственная платформа возвращает данные на платформу RN на основе обратных вызовов. Код выглядит следующим образом:

import { NativeModules } from 'react-native';

const userInfo = NativeModules.UserInfo; // 获取自定义用户信息模块

console.log(userInfo.userName); // 打印用户名

const router = NativeModules.Router; // 获取自定义路由模块

// 调用原生路由跳转方法
router.openHome('参数', (res) => {
    console.log(res); // 打印返回数据
});

Через NativeModules мы можем гибко получать или передавать данные на нативную платформу, а также можем писать разныеBridgeспособ реализации инкапсуляции модулей передачи данных, таких как модуль пользовательской информации, модуль маршрутизации и модуль сетевых запросов.

6. Редукционная архитектура

В проекте RN, помимо функций связи и взаимодействия с нативной платформой, самой платформе RN также необходимо реализовать некоторое управление состоянием данных. Здесь мы также должны понимать архитектуру Redux.

Redux — это контейнер для управления состоянием приложения React, который также работает в RN. Он использует один поток данных для управления данными, и единственный способ изменить состояние — отправить операцию действия. Эта архитектура позволяет легко поддерживать или расширять данные нашего проекта RN, а процесс изменения данных легко отслеживать и фиксировать. Конкретные ключевые слова, о которых следует знать, следующие:

Для получения конкретных документов см.:cn.redux.js.org/

Конечно, вы также можете использовать другие сторонние библиотеки для реализации подобных архитектур, такие как mobx, dva и т. д.

7. CSS-in-JS

В дополнение к архитектуре Redux, RN также добавилаCSS in JSКонцепция разделения задач переносит первоначальную концепцию разделения задач на смешение задач, благодаря чему мы можем писать CSS-код на JS, но это не нарушает предыдущую концепцию разделения задач.

Теперь, с ростом популярности концепции компонентизации, возрастает потребность в поддержке стилей CSS на уровне компонентов.CSS-in-JS использует JavaScript внутри компонента для абстрагирования CSS, который можно объявлять и поддерживать. Это не только снижает риск написания стилей CSS, но и упрощает разработку. Разница между ним и модулями CSS заключается в том, что файлы стилей CSS больше не требуются.

В сочетании с синтаксисом JSX становится удобнее писать и поддерживать CSS в RN, а также это неизбежный продукт непрерывного развития веб-компонентизации.

8. Flex Layout в React Native

Кроме того, при разработке проектов РН официально рекомендуемая компоновкаFlexlayout, потому что Flexbox может обеспечить согласованную структуру макета на разных размерах экрана, что также решает проблему кросс-платформенного рендеринга макета.

По сравнению с макетом Flex, используемым нашим клиентом, макет Flex в RN немного отличается, например, значением flexDirection по умолчанию является столбец, а не строка, и flex может указывать только числовое значение. Для ознакомления с макетом Flex см.:Учебное пособие по гибкому макету: синтаксис,Учебное пособие по Flex Layout: примеры

9. Горячее развертывание с React Native

Наконец, мы представляем горячее развертывание в RN, что является одной из важных причин выбора RN для разработки APP. По сравнению с традиционными обновлениями приложений, большинство из них требуют процесса проверки третьей стороной, и этот процесс может быть медленным или несвоевременным.Общей проблемой является то, что ошибки, которые необходимо срочно исправить, не могут быть обновлены вовремя, что приводит к прямым экономическим Горячее развертывание может в некоторой степени решить или смягчить влияние этой проблемы. Итак, как это работает?

В левой части приведенного выше изображения показан процесс теплового развертывания, когда пользователь обращается к приложению RN. Сначала пользователь обращается к приложению, и приложение запрашивает пакет ресурсов на сервере RN.Если пакет ресурсов не обновлен, прочитайте ресурс локального кеша.Если разработчик репрессирует пакет ресурсов на сервере для ошибка, то приложение поднимется, и оно закэширует его.После того, как пользователь получит при следующем входе, вы будете обновлены. Это процесс теплового развертывания РН.

При локальной разработке мы обнаруживаем, что когда проект RN запущен и запущен, мы изменяем код, повторно заходим на страницу RN из приложения, локальный терминал снова загружает данные ресурсов после обновления, и это отражает горячее развертывание RN.

То же самое горячее онлайн-развертывание требует загрузки наших упакованных ресурсов RN на сервер для чтения приложением.

Мы можем вручную выполнить процесс упаковки, загрузки и публикации.Конечно, чтобы уменьшить вмешательство человека и добиться автоматизации интерфейса, мы также можем передать этот процесс на платформу построения для автоматической упаковки и развертывания, что требует создания фона система для управления.

Эпилог

В этой статье представлены принцип и логика реализации гибридной разработки React Native. Только предварительно поняв принцип, вы сможете эффективно инвестировать в развитие проекта, а также сможете напрямую читать официальные документы о реализации функций самой РН.Также я привожу дополнительные справочные материалы о РН:

• Учебное пособие по React-Native
• Поделиться 50 полных реагирования нативных проектов
• Получение нативных деталей для всех разработчиков
• Изучите учебник по React Native за 30 дней

Примечание. Некоторые легенды в этой статье взяты из книги «React Native Mobile Development Practice».