Начало работы с React Native для Windows и macOS
27 марта 2022 г.React Native как среда JavaScript является наиболее популярной для кроссплатформенной мобильной разработки. Несмотря на растущих конкурентов, он по-прежнему находится в авангарде мобильных технологий. Но это не предел его возможностей. Так что еще? == Можно ли использовать React Native для рабочего стола? == Да!
React Native также можно использовать для создания настольных приложений для устройств Windows и macOS с использованием фреймворка Microsoft — React Native для Windows + macOS.
Как мы можем прочитать на [сайте фреймворка] (https://microsoft.github.io/react-native-windows/):
«он обеспечивает поддержку React Native для Windows SDK, а также для macOS 10.14 SDK. Благодаря этому вы можете использовать JavaScript для создания собственных приложений Windows для всех устройств, поддерживаемых Windows 10 и более поздних версий, включая ПК, планшеты, 2-в-1. , Xbox, устройства смешанной реальности и т. д., а также экосистемы настольных компьютеров и ноутбуков macOS».
Одним словом, возможности безграничны.
В этой статье я расскажу:
- преимущества React Native,
- React Native для требований к рабочему столу,
- как начать работу с React Native для ПК,
- развертывание настольных приложений.
Почему вас это должно волновать
Одним из преимуществ использования React Native является то, что у вас есть единая кодовая база для создания приложений для разных платформ. Теперь одни и те же компоненты пользовательского интерфейса, доступные в React Native, можно использовать не только для мобильной разработки, но и для настольных приложений.
Давайте поговорим о требованиях
Существуют некоторые дополнительные требования и этапы настройки для создания приложений для настольных компьютеров с использованием React Native.
Требования Windows
Приложения React Native для Windows можно запускать только на устройствах с Windows 11 и Windows 10 версии: 10.0.16299.0 или выше, но не все функции будут работать во всех версиях.
Вы можете найти все поддерживаемые версии Windows 10 [здесь] (https://microsoft.github.io/react-native-windows/docs/win10-compat).
Кроме того, можно разрабатывать приложения для Windows на ПК, отличном от Windows, с помощью виртуальной машины. Виртуальная машина может работать локально или в Azure.
требования macOS
Приложения для macOS, созданные с использованием этой платформы, можно запускать на устройствах Mac с High Sierra (10.13) или новее. Устройство Mac необходимо для создания приложений с собственным кодом для macOS.
Кроме того, вам необходимо установить Xcode 11.3.1 или более новую версию и обязательно установить инструменты командной строки Xcode. Последний шаг — установить CocoaPods на работающее устройство:
sudo gem установить Cocopods
Начиная
Перед началом этапа разработки убедитесь, что вы настроили все зависимости разработки.
Windows
Установка всех зависимостей может быть выполнена вручную или с помощью скрипта PowerShell, работающего в окне rnw-dependencies.ps1. Чтобы запустить процесс установки автоматически, вам нужно открыть окно PowerShell с повышенными правами и выполнить:
Set-ExecutionPolicy Unrestricted-Scope Process-Force; iex (New-Object System.Net.WebClient).DownloadString('https://aka.ms/rnw-deps.ps1')
Дополнительные сведения о ручной установке доступны [здесь] (https://microsoft.github.io/react-native-windows/docs/rnw-dependencies).
macOS
Зависимости разработки для приложений React Native для macOS такие же, как и для React Native для iOS. Убедитесь, что вы установили все стандартные зависимости React Native, описанные [здесь] (https://reactnative.dev/docs/environment-setup).
Вам также необходимо установить Node.js версии 12 LTS или новее и Watchman через HomeBrew.
узел установки brew и сторож установки brew
Настройка проекта
Для настройки проекта для приложения Windows или macOS выполните следующие шаги:
- Инициализируйте проект RN:
npx react-native init <projectName> --template react-native@^0.67.0
- Перейдите в этот только что созданный каталог и установите расширение для macOS/Windows:
npx react-native-macos-init или npx react-native-windows-init --overwrite
- Для запуска приложения используйте команду:
npx react-native run-macos или npx react-native run-windows
Что насчет производительности?
Учитывая приложения, созданные с использованием кроссплатформенного решения, и приложения, созданные с помощью React Native с использованием RN для Windows + macOS, производительность выше для второго решения — приложения легче, потребляют меньше памяти и порождают меньше процессов.
Но стоит помнить, что практически невозможно создать приложение с использованием React Native, которое имеет тот же уровень производительности, что и нативное приложение.
Выпуск приложения
Когда приложение будет готово, самое время подготовить файлы сборки для магазинов платформы. Процесс подготовки приложений к выпуску очень похож для каждого магазина платформы.
Развертывание Windows
Приложения React Native для Windows — это приложения универсальной платформы Windows (UWP). Чтобы иметь возможность публиковать приложения React Native для Windows в Microsoft Store, вы должны быть зарегистрированы в качестве разработчика приложений для разработки приложений для Windows, а затем зарегистрироваться через Microsoft Partner Center и зарезервировать имя для приложения.
Резервирование имени — это первый шаг к созданию приложения в Центре партнеров. Итак, позвольте мне показать вам, как это сделать.
- Перейдите на страницу приложений и игр Партнерского центра.
- Нажмите ==Новый продукт==.
- Выберите тип вашего приложения.
- Введите имя, которое хотите использовать, и нажмите ==Проверить доступность==. Если имя доступно, вы увидите зеленую галочку. Если это имя уже используется, вы увидите соответствующее сообщение.
- После того, как вы выбрали доступное имя, которое хотите зарезервировать, нажмите ==Зарезервировать название продукта==.
После резервирования имени для приложения его решение необходимо открыть в Visual Studio. Некоторые операции следует выполнить (например, связать приложение с магазином, установить для конфигурации решения значение «Выпуск») перед запуском приложения через комплект сертификации приложений для Windows, чтобы проверить, проходит ли оно все тесты.
Затем в Центре партнеров вы должны заполнить форму отправки приложения, содержащую вопросы о приложении (возрастные рейтинги, цены, доступность, списки магазинов и т. д.), и загрузить файл .appxupload.
Однако существуют некоторые требования для .appxupload:
- он должен быть подписан желаемым сертификатом,
- он должен успешно пройти WACK,
- он имеет персонализированные визуальные активы,
- оно имеет отображаемое имя, совпадающее с зарезервированным именем приложения,
- он создается из той же учетной записи разработчика, что и учетная запись, в которой выполняется отправка.
После заполнения формы отправки приложение можно отправить в Microsoft Store. Обычно требуется несколько часов, чтобы пройти сертификацию и проверку и появиться в магазине приложений.
развертывание macOS
Теперь давайте посмотрим на развертывание macOS. Чтобы иметь возможность отправлять приложения в App Store, вам необходимо зарегистрироваться в программе Apple Developer Program. Подготовка приложения к отправке должна начинаться с подтверждения того, что приложение соответствует рекомендациям App Store.
Это важный шаг, поскольку во время процесса сертификации приложения рецензент оценивает приложение на основе рекомендаций. Убедившись, что приложение не содержит ошибок и сбоев, вы можете создать список приложений в App Store через App Store Connect.
Вот как это сделать:
- Войдите в App Store Connect и перейдите в раздел "==Мои приложения==", создайте новое приложение с помощью кнопки "+".
- Заполните информацию о своем приложении (имя, категория, URL-адрес политики конфиденциальности, идентификатор пакета и т. д.), затем предоставьте ==некоторую информацию о сборке== - скриншоты приложения, название, описание, настройки выпуска и т. д.
- Загрузите свое приложение в App Store, подключитесь с помощью ==Xcode== (настройте информацию о подписании и команде, подготовьте архив и загрузите его: ==Продукт > Архив > Распространить приложение > iOS App Store==).
- В App Store Connect выберите сборку, экспортированную из Xcode, и отправьте приложение на проверку. Статус должен измениться на «==Ожидание проверки==». Если возникнут какие-либо проблемы с представленной сборкой, рецензент свяжется с вами. Процесс проверки обычно занимает несколько дней.
Заключение
При выборе RN для Windows + macOS на этапе разработки могут возникнуть некоторые проблемы, которые невозможно решить, если вы не имеете опыта разработки для собственной платформы. Тем не менее, выбор этой платформы для многоплатформенных приложений — это большая возможность, поскольку для каждой платформы существует одна кодовая база. Кроме того, это ускоряет время разработки.
Вот и все! Если вам интересно узнать больше об этом, посетите наш блог. Там много информации о React, его библиотеках, компонентах и многом другом.
Эта статья была написана Александрой Шпила, разработчиком программного обеспечения в Gorrion.
Источники
https://microsoft.github.io/react-native-windows/
https://reactnative.dev
Оригинал