Возможности React Native как фреймворка со временем продолжают расти. Для незнакомых: React Native - кроссплатформенный фреймворк, разработанный Facebook. Это открытый исходный код, который позволяет создавать мобильные приложения с использованием JavaScript в качестве ядра.

Благодаря проекту Николаса Галлахера с открытым исходным кодом React Native for Web теперь вы можете использовать компоненты React Native API для создания веб-приложения, в котором используется React DOM в качестве ядра. React Native уже позволяет удобно писать мобильные приложения для двух платформ: iOS и Android. И теперь Интернет постепенно входит в картину. 🤩

Звучит интересно, правда? Именно этим мы и займемся в этом руководстве. Мы шаг за шагом рассмотрим процесс интеграции веб-приложения, использующего React Native.

Требования

  • NodeJS версии >= 8.x.x и npm / yarn
  • Будет полезно базовое понимание функций ES6 JavaScript, ReactJS и React Native.

Начало работы: создание приложения на React

Для начала перейдите в свой терминал и установите следующие инструменты командной строки. Первый поможет вам создать приложение React, а другой будет запускать приложение React Native:

Примечание. Возможно, вам придется использовать sudo перед приведенной выше командой, если npm разрешения не установлены и все по умолчанию.

После установки запустите следующую команду из окна терминала, чтобы сгенерировать новый проект React:

Это создаст новый каталог. В этом (официальном) инструменте создания проектов хорошо то, что он уже включает встроенную поддержку псевдонимов react-native-web на react-native.

Следующим шагом является установка еще пары зависимостей, чтобы этот проект работал так, как мы хотим. Убедитесь, что вы прошли внутри только что созданного каталога проекта, а затем выполните следующую команду:

Плагин babel babel-plugin-module-resolver поможет вам разрешить модули вашего проекта при компиляции с помощью Babel. React Native внутренне использует компилятор Babel. Теперь установите самые важные зависимости, без которых этот проект не запускался бы.

На данный момент последний шаг - создать файл с именем .babelrc в корне проекта со следующим фрагментом:

Примечание. Если вы хотите настроить проект приложения react-native-web, в котором вы используете свою собственную webpack конфигурацию, или вам нужно писать модули с jest, или если вы поклонник flow, вам следует взглянуть на на эту ссылку , чтобы все работало правильно.

Работает в сети

Прежде чем приступить к созданию демонстрационного приложения, давайте посмотрим, работает ли текущая конфигурация. Откройте файл src/App.js и замените содержимое в нем следующим фрагментом кода:

Здесь мы в основном используем react-native компоненты пользовательского интерфейса сборки API для веб-приложения. Обратите внимание, что в терминах React Native View эквивалентно div в HTML, а text эквивалентно p или span. Между API мобильного пользовательского интерфейса и Интернета много общего, но есть важные различия, которые следует понимать и помнить.

Чтобы запустить приложение, перейдите в окно терминала, напишите npm start и запустите его. В окне браузера при посещении URL http://localhost:3000 вы получите следующий результат.

Чтобы убедиться, что он строит дерево DOM для управления узлами, вы можете открыть инструменты разработчика в своем веб-браузере и перейти на inspect > Elements, чтобы увидеть идентификаторы и классы со случайной строкой, созданной в типичном приложении React.

Подобно приложению React, компонент App остается точкой входа в наше приложение. Кроме того, файл index.js остается без изменений, поэтому очень важно отметить, насколько легко интегрировать мобильную платформу и веб-библиотеку.

О стилизации

React Native полагается на JavaScript, когда дело касается стилизации компонентов или элементов пользовательского интерфейса. React Native для Интернета реализует API стиля React Native. Чтобы определить стиль, это то же самое в приложении React Native. Все, что вам нужно сделать, это объявить объект StyleSheet, внутри которого должно быть определено каждое стилизованное свойство.

В нашем App.js файле мы реализуем это. Взглянем:

Некоторые веб-модули, такие как rem и em, не поддерживаются React Native, поэтому рекомендуется избегать их использования.

Элементы списка

Отображение списка в React Native Web аналогично React Native для мобильных устройств. Давайте добавим данные макета и воспользуемся контейнером FlatList для отображения содержимого. Измените App.js, как показано ниже:

Если вы запустите его в браузере, вы получите следующий результат.

Заключение

Пока что вы знакомы с модулем React Native for Web. Вы узнали, как интегрировать React Native как компонентный API и заставить его работать в веб-браузере. React Native for Web не поддерживает все API компонентов React Native. Отсутствует поддержка Modal, WebView, Slider. Также некоторые модули, такие как CameraRoll и ImageStore, не полностью поддерживаются, что понятно, но может быть полезно, если доступно в некоторых случаях использования.

Частные лица и компании, которым нравится работать с React Native, работают над сокращением разрыва между Интернетом и самим фреймворком. Это позволит создавать мультиплатформенные приложения. Такие организации, как Expo, в настоящее время работают над собственным форком React Native Web, который может поддерживать гораздо больше API и компонентов, чем React Native for Web, поэтому будущее в этом смысле кажется светлым. Они будут выпускать Expo Web с Expo SDK 33.x.x, так что следите за этим.

Некоторые другие ресурсы, на которые стоит обратить внимание:

  • Create React Native Web App - это инструмент командной строки, который управляет вашим приложением лучше, чем ручная интеграция, которую мы сделали в этом руководстве.
  • React Native for Web - это модуль, который мы использовали в этом посте.

Весь код, используемый в этом руководстве, можно найти в репозитории GitHub ниже.



amandeepmittal / reactnativeweb-demo
React Native для веб-демонстрации. Участвуйте в разработке amandeepmittal / reactnativeweb-demo, создав учетную запись на… github.com



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

Независимая редакция, Heartbeat спонсируется и публикуется Comet, платформой MLOps, которая позволяет специалистам по обработке данных и группам машинного обучения отслеживать, сравнивать, объяснять и оптимизировать свои эксперименты. Мы платим участникам и не продаем рекламу.

Если вы хотите внести свой вклад, отправляйтесь на наш призыв к участникам. Вы также можете подписаться на наши еженедельные информационные бюллетени (Deep Learning Weekly и Comet Newsletter), присоединиться к нам в » «Slack и подписаться на Comet в Twitter и LinkedIn для получения ресурсов, событий и гораздо больше, что поможет вам быстрее и лучше строить лучшие модели машинного обучения.