Настройка нескольких сред на React Native для iOS и Android

Редактировать 20.01.21: руководство по обновлению React Native 0.63.4

Работая над Peel, мы быстро поняли, что нам нужно установить несколько целей для одного и того же проекта React Native. В этом есть несколько больших преимуществ:

Храните переменные среды в отдельных файлах
На один телефон можно установить несколько экземпляров вашего приложения в разных средах (с разными идентификаторами пакетов).
Нет необходимости добавлять дополнительную логику для переключения между URL-адресами API, константами, ключами и т. Д.

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

Прежде, чем мы начнем

Цель этого руководства - настроить несколько сред в собственном приложении React Native. Однако, если вы хотите следовать инструкциям ради обучения, я создал этот репозиторий, который вы можете клонировать на своей машине.

Установите response-native-config

Мы собираемся использовать пакет response-native-config для обработки переменных нашего окружения. В своем репо запустите:

npm install react-native-config --save

Затем вам необходимо связать библиотеку, даже если вы используете Cocoapods:

npx react-native link react-native-config

Если вы используете Cocoapods, вам также необходимо запустить установку модуля:

cd ios
pod install
cd ../

Затем мы создадим файлы, в которых будут храниться переменные нашей среды. Мы установим две среды: development и production, поэтому создадим два файла в корне нашего проекта: .env.development и .env.production.

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

In .env.development:

ENVIRONMENT=development

И в .env.production:

ENVIRONMENT=production

В реальном приложении эти файлы будут содержать все ваши URL-адреса API, константы, ключи API… все, что характерно для каждой среды.

Настройка типов сборки на Android

Мы будем использовать типы сборки с суффиксами для создания разных версий нашего приложения на Android.

Открыть android/app/build.gradle
В самом верху файла мы назначим файл среды для каждого типа сборки:

project.ext.envConfigFiles = [
  release: ".env.production",
  debug: ".env.development",
  developmentrelease: ".env.development",
]

Именование ваших типов сборки важно! Убедитесь, что вы используете только строчные буквы без специальных символов и добавляете «выпуск» в конце имени ваших пользовательских типов сборки, иначе они могут не работать.

Добавьте эту строку после apply plugin:

apply from: project(":react-native-config").projectDir.getPath() + "/dotenv.gradle"

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

defaultConfig {
  ...
  resValue "string", "build_config_package", "com.myapp"
  manifestPlaceholders = [label: 'MyApp']
}

Замените com.myapp идентификатором пакета вашего приложения.

Обратите внимание, что мы также добавили свойство manifestPlaceholders. Мы будем использовать содержащееся в нем значение label, чтобы изменить имя приложения в зависимости от среды, в которой оно работает. Подробнее об этом позже.

Добавьте developmentrelease тип сборки с суффиксом ".development":

buildTypes {
  ...
  developmentrelease {
    initWith debug
    applicationIdSuffix ".development"
    manifestPlaceholders = [label: 'MyApp Dev']
  }
}

Добавьте подходящие резервные варианты для debug типа сборки:

debug {
  ...
  matchingFallbacks = ['debug', 'release']
}

Вот и все! Переменные среды теперь доступны для вашего нативного кода, как и ваш код Javascript:

import Config from 'react-native-config';
Config.ENVIRONMENT; // "development" or "production"

Если вы следуете этому руководству, используя репозиторий, который я дал ранее, добавьте эту строку вверху файла App.js:

import Config from 'react-native-config';

И измените строку 21 на:

const environment = Config.ENVIRONMENT;

Теперь вы можете запускать обе версии приложения на своем устройстве.
Разработка:

npx react-native run-android --variant=developmentrelease

Производство:

npx react-native run-android --variant=release

Добавление цели на iOS

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

Откройте .xcworkspace файл своего приложения в Xcode, затем щелкните свой проект правой кнопкой мыши ›New Group

Переименуйте эту группу в MyAppDevelopment (заменив MyApp названием вашего приложения)
Щелкните правой кнопкой мыши по своей основной цели (MyApp для меня) ›Duplicate› Duplicate Only

Переименуйте дублированную цель в MyAppDevelopment
В General установите Bundle Identifier на com.myapp.development. Имея другой идентификатор пакета, мы сможем установить две версии нашего приложения (разрабатываемую и рабочую) на одно и то же устройство.

Переместите новый Info.plist файл, который был автоматически создан при дублировании цели в группу MyAppDevelopment, затем переименуйте его в Info.plist. Обратите внимание, что вам нужно будет фактически скопировать и вставить файл в группу MyAppDevelopment, если вы просто сдвинете его из Xcode, будет перемещена только ссылка, а не сам файл!
Если ваша основная цель содержит .entitlements файл (MyApp.entitlements), продублируйте его и переместите в MyAppDevelopment группу, а затем переименуйте в MyAppDevelopment.entitlements. Это позволит вам поддерживать разные возможности для каждой цели (удаленные уведомления, группы приложений…).
На вкладке Build Settings целевой MyAppDevelopment найдите раздел Packaging, затем установите Info.plist File путь к Info.plist, который мы только что переместили; MyAppDevelopment/Info.plist в нашем случае.

Если на предыдущем шаге вы скопировали .entitlements файл, вам также нужно будет найти раздел Signing и указать Code Signing Entitlements путь к _46 _ (_ 47_).

Щелкните MyApp в левом углу верхней панели ›Manage Schemes и прокрутите вниз, чтобы найти только что созданную схему MyApp copy. Переименуйте его в MyAppDevelopment, затем нажмите Edit в нижнем левом углу.
Щелкните Build аккордеон (не раскрывая его), затем + в нижнем левом углу. Найдите «React» и добавьте элемент с именем React (dah). Не забудьте снять флажок Parallelize build.

Теперь наша новая цель должна работать, но нам нужно настроить react-native-config.

Разверните Build аккордеон, щелкните Pre-actions, затем + в нижнем левом углу ›New Run Script Action.
Замените содержимое скрипта на:

echo ".env.development" > /tmp/envfile

Повторите то же действие для основной цели, на этот раз заменив содержимое скрипта на:

echo ".env.production" > /tmp/envfile

Мы закончили играть с Xcode! Теперь мы отредактируем Podfile проекта (ios/Podfile).

Поскольку вы читаете это руководство, скорее всего, ваш проект сформулирован вокруг одной главной цели. Сначала нам нужно установить абстрактную цель, чтобы несколько целей могли использовать одни и те же модули, а также использовать свои собственные модули. В Podfile замените строку:

target 'MyApp' do

С участием:

abstract_target 'App' do

App можно заменить на что угодно, но не должно совпадать с именами ваших целей!

Теперь нам нужно определить наши цели, которые будут унаследованы от нашей абстрактной цели. Справа под последним pod ‘SOME_PLUGIN’, :path => ‘../node_modules/SOME_PLUGIN’ (было SOME_PLUGIN, вероятно, будет react-native-config, поскольку это последний плагин, который мы установили), добавьте две наши цели:

target 'MyApp' do
  #Production-specific pods
  target 'MyAppTests' do
    inherit! :complete
    # Pods for testing
  end
end
target 'MyAppDevelopment' do
  #Development-specific pods
end

Примечание: мы переместили тестовую цель по умолчанию MyAppTests внутрь MyApp, чтобы соблюсти исходную архитектуру.

Если вы использовали репозиторий, который я связал в начале этого руководства, ваш Podfile должен выглядеть так:

Наконец, если вы используете Cocoapods, вам нужно будет снова запустить установку pod:

cd ios
pod install
cd ../

Вот и все! Переменные среды теперь доступны для вашего нативного кода, как и ваш код Javascript.

Если вы хотите получить доступ к переменным среды из ваших Info.plist файлов, выполните эти дополнительные шаги для каждой схемы.