Цель и значение React Web очень ясны: пусть реагирует нативный код, запускающийся в Интернете и позвольте набору кода запускать на различных мобильных терминалах. Для фронта и бизнеса это качественное повышение эффективности развития. На ранних стадиях проекта мы также консультировались с командой React с аналогичными вопросами. Основной одноклассник их команды @VJEUX также подумал, что это очень крутая вещь и то, что они хотели сделать в будущем. Возможно, когда React Native для Android может быть выпущена React Web. (YY)
Техническая архитектура
Существует несколько решений адаптации, основанных на NACT Native:
1. Разработайте стандарт моста, а RN и RW каждый внедряет этот набор стандартов оптимальным образом.
Например, на основе макета Flex мы реализуем постоянный набор гибких компонентов, <Flex>, <cell> и т. Д.
2. Полностью выровняйте RN, RW реализует все API, которые RN может реализовать.
В обсуждении последний был наконец выбран.
Из -за концепции React Web, пусть реагирует нативный код, который будет работать на веб -стороне, он определяет, что RW - это просто инструмент для строительства и упаковки, отделенный от RN, а реализация RW не имеет большого значения. Тогда общее техническое направление очень ясно: для реализации RN -согласованного стиля, компонента и API и, наконец, составить его в веб -версию через строительный инструмент.
Пример
Давайте посмотрим на процесс создания веб -проекта React:
Шаг 1: Установите веб -сайт React и выполните связанную конфигурацию
Этот шаг в основном для установки пакетов React-Web и связанных с ними зависимостей и настройки сценариев упаковки WebPack.
Чтобы упростить этот шаг, мы разработали инструмент командной строки React-Web-Cli, который требует только выполнения двух строк команды. В то же время инструмент командной строки также поддерживает запуск сервера отладки, упаковки и других функций, которые будут представлены позже.
Установите инструменты CLI:
npm install React-web-cli -g
Установите и настройте React Web и т. Д.:
React-web init <текущий каталог проектов>
После завершения выполнения, в вашем каталоге проекта будут созданы библиотеки, связанные с установкой NPM, а файл Web/WebPack.config.js будет создан автоматически с письменной конфигурацией в нем. В настоящее время структура каталогов:
.├acke readme.md├acредя Android/├ack index.Android.js├C├ index.ios.js├íмобиль ios/├ack package.json└íмоби
Шаг 2: Добавьте файл входа и сделайте соответствующие конфигурации
Каждый проект должен иметь файл входа, который обычно используется для введения и вызова других компонентов и инициализации проекта, такого как index.ios.js, представляет файл входа проекта на платформе iOS. Чтобы соответствовать спецификации именования нативного файла React, мы создаем index.web.js в качестве файла ввода, и нам нужно указать, что файл является файлом ввода в Webpack. Откройте файл web/webpack.config.js и изменить переменную конфигурации:
var config = {paths: {src: path.join (root_path, '.'), index: path.join (root_path, 'index.web'),},};Затем мы создаем файл index.web.js. Этот файл на самом деле очень похож на index.ios.js, но немного отличается. Основное отличие заключается в том, что iOS требуется только AppRegistry.registerComponent ('awes', () => awes); Чтобы позволить нативному коду Xcode получать и обрабатывать ваш код JS, в то время как веб -сторона должна быть вставлена в узел DOM, прежде чем его можно будет использовать. Поэтому нам нужно добавить следующий код в нижней части index.web.js:
Appregistry.registerComponent ('awes', () => awes); if (platform.os == 'web') {var app = document.createElement ('div'); document.body.appendchild (app); Appregistry.Runapplication ('awes', {roottag: app});}Затем компонент платформы должен быть введен в верхнем разделе «Восстания». Таким образом, конфигурационная часть была обработана. Выполните команду React-Web Start, чтобы запустить сервер отладки!
Вы можете изменить его по желанию, это почти то же самое, что и опыт в нативном симуляторе React.
Шаг 3: Проверка и упаковка код веб -версии
Когда вы закончите модификацию, разработку и тестирование веб -стороны, вы можете упаковать и публиковать ее. Команды, упакованные инструментом React-Web-Cli:
React-Web Bundle
После упаковки файл будет храниться в веб -/ выводе/ каталоге. Вы можете напрямую открыть index.html (если в приложении запрашивалось операции, вам необходимо проверить его с локального сервера), а затем вы можете опубликовать его после проверки.
Что случилось во время этого процесса?
У любопытных студентов могут возникнуть некоторые вопросы, когда они видят это. Что сделали некоторые команды инструмента командной строки выше? Почему веб -пакет React реагирует нативный код в копию кода, используемого на веб -стороне? Безопасно ли React Web и надежна? Что внутри?
Здесь я кратко представлю принципы реализации React Web и то, что на самом деле сделали шаги.
React Web Refrents React Native Components на веб -стороне
React отделяет код от среды платформы, добавляя слой, чтобы разработчики могли выполнять некоторую обработку на уровне среды платформы, чтобы один и тот же код мог адаптироваться к большему количеству среды платформы и т. Д.
Например, React-Canvas записывает код в соответствии с синтаксисом React, делает некоторую обработку на уровне среды платформы (запускает ваш код React и делает его с холстом), а затем достигает определенных целей (повышение производительности на мобильной стороне).
В React Native то же самое относится и к кусочке кода, чтобы работать на iOS и Android одновременно. Нативная команда React сделала некоторую обработку на собственном приложении соответствующей платформы, чтобы позволить ему проанализировать код, который выполняет синтаксис React.
Есть также изоморфные приложения. Сервер использует React + node.js для генерации HTML, и клиент использует React для получения взаимодействия и функций, связанных с клиентом. То же самое верно.
С этой целью версия React v0.14.x началась с двух библиотек, React и React-Dom, которые фактически убрали специальную обработку платформы браузера и превратили ее в только библиотеку React-Dom.
Особая вещь о RACE Native заключается в том, что внедрением компонента самого низкого уровня является реализация нативного, поэтому она не поддерживает теги, такие как Span и Div. Анимация и т. Д., Также напрямую называют родным для рендеринга интерфейса. Следовательно, веб -сторона не поддерживается, но большинство компонентов могут быть смоделированы и реализованы с использованием веб -технологий. Анимация может использоваться в CSS3, базовые элементы могут быть смоделированы с помощью одной и той же проблемы HTML, макета и совместимости в CSS, поэтому веб-сайт React должен только повторно внедрить нативные компоненты React с использованием веб-технологий, и с помощью React React этого слоя кусок кода может быть реализован на нескольких платформах.
Чтобы привести очень простой пример, текстовый компонент:
Реализация нативных вызовов называет многие из базовых реализаций кода RACE Native.
Для веб -стороны просто используйте тег <pan> для вывода текста, чтобы реализация React Web напрямую создает тег <pan>, и можно привязать некоторые события или что -то в этом роде.
Вы можете использовать нативные компоненты React, которые могут с уверенностью работать в демонстрации Explorer UI.
WebPack помогает переключать целевые показатели упаковки
Сделав компонент, который совместим с веб-стороной, разве нам не нужно заменить все необходимые («реагирующие») в компонентах, которые будут упаковаться с требованием («React-Web»)? В противном случае, как я могу использовать свои веб -компоненты для его упаковки?
Мощный WebPack поставляется с элементами конфигурации псевдонима, чтобы помочь вам решить эту проблему:
Resolve: {Alias: {'react-inative': 'React-web', 'ReactNativeArt': 'React-Art',}, расширения: ['', '.js', '.jsx'],},,Таким образом, при упаковке все места, где требуется ('React-Clive'), заменяются пакетом React-Web, и модуль React-Web. Exports соответствуют реагированию, так что код может работать без замены.
Кроме того, еще один метод введения может быть реализован с помощью плагина, см. Ниже.
Введите компоненты с помощью метода спешки для повышения производительности
WebPack и другие инструменты упаковки, которые поддерживают спецификации CommonJS, будут упаковывать все компоненты потребностей в файле вместе. Для RACE Native размер кода не имеет значения, но для мобильной сети это немного важнее. Особенно, если ваш проект нуждаются только в текстовых компонентах, но это печально, потому что требуется ('React-Web') приводит к упаковке всех компонентов.
Основываясь на плагине WebPack, есть еще один способ внедрить компоненты для решения этой проблемы, вы можете назвать ее поспешным путем. Этот метод требует загрузки плагина WebPack Plagin Haste-Resolver-Webpack-Plugin. Конфигурация WebPack по умолчанию была загружена для вас. Вы можете использовать его непосредственно в компоненте следующим образом:
var text = require ('ReactText');Вместо того, что было раньше:
var {text} = require ('react-inative');Таким образом, когда WebPack упакована, первый будет упаковывать только содержание этого компонента, который может уменьшить размер и повысить производительность. Как это достигается?
Когда веб-пакет плагина загружается, все компоненты будут отсканированы сначала, а информация @providesmodule в заголовке компонента (например, информация текстового компонента), а затем, когда имя компонента требуется в других файлах, файл будет автоматически расположен для упаковки. В то же время вы также можете различать платформы. Даже если это то же имя, платформа будет дифференцирована при упаковке соответствующих файлов (файлы определяются в соответствии с правилами именования index.xxx.js).