Введение

Expo – это платформа с открытым исходным кодом для создания универсальных нативных приложений для Android, iOS и Интернета с использованием JavaScript и React.

Мотивация

Недавно меня попросили перенести существующее реактивное приложение, чтобы использовать его в компании, в которой я работаю. Основной причиной использования expo было использование службы приложений expo (https://expo.dev/eas) для простого развертывания приложений с помощью всего одной команды! Поскольку в существующем React-Native приложении было несколько приложений с белой меткой, мне пришлось найти способ поддержки развертывания для всех приложений с помощью eas.

Итак, здесь я поделюсь пошаговым руководством о том, как я создавал приложения с белой этикеткой с помощью expo. Давайте начнем!

Шаги

  1. Создайте учетную запись на https://expo.dev/eas
  2. Установив expo cli, запустите
    npm install — global expo-cli
  3. Создание проекта
    expo init whitlabeldemoи выберите нужный шаблон
  4. Настройте app.config.js
    После создания проекта вы можете увидеть app.json в корне проекта, который имеет базовую конфигурацию для приложения, такую ​​как версия имени и т. д. Но для наличия нескольких конфигураций у нас должна быть динамическая конфигурация, которая выполняется с помощью пользовательского app.config.js. Давайте создадим файл app.config.js (вы можете ввести touch app.config.js в корне, чтобы создать его.

    Теперь мы на самом деле собирается реализовать конфигурации для нескольких приложений, используя app.config.js, Посмотрите на приведенные ниже фрагменты кода:

На изображении выше у нас есть два приложения: core и whitelabelone. У каждого есть имя, значок, заставка, package/bundleIndentifier, версия и, наконец, дополнительное свойство. Это все, что вам нужно для настройки нескольких приложений. Вам не нужно заботиться о настройке productFlavors (Android) или создании нескольких целей (ios) для каждого отдельного приложения. Все абстрагируется с помощью нескольких строк кода js! Это удивительно, не так ли?

5. Развертывание

Теперь, когда мы настроили наши приложения, вы можете задаться вопросом, как я буду обрабатывать развертывание для конкретного приложения? Это просто!

Все, что вам нужно сделать, это установить eas cli с помощью npm install — global eas-cli и
изменить appName в app.config.js, который вы хотите развернуть.

После изменения appName просто запустите eas build, который создаст определенные/все (вы можете выбрать из опции) .aab/.ipa и поместит их на сервер eas. Например: после запуска eas build и выбора Android в параметрах вы должны увидеть примерно следующее:

Затем вы можете перейти к конкретному URL-адресу сборки (посмотрите на скриншот для URL-адреса) и увидеть загруженные туда сборки. Вот и все, вам никогда не придется заботиться о настройке хранилища ключей/сертификатов и т. д. Все управляется eas и все доступно на вкладке учетные данные.

Вот и все. Надеюсь, вам понравилось читать эту статью. Если вы это сделаете, не забудьте подписаться на меня на Medium. Я буду публиковать много интересных материалов, связанных с реакцией/react-native/relay и т. д.

Полный исходный код доступен здесь:https://github.com/VivekNeel/expo-whitelabel-demo