React Native:Nastavení více prostředí (Schémata/Příchutě)

Při vývoji aplikace často potřebujeme my vývojáři vytvořit různá sestavení s různými konfiguracemi. Usnadnění procesu údržby a testování. Obvykle se vytvoří 3 různé sestavení:vývoj , inscenace a výroba .

Instalace reakt-native-config

Nainstalujte balíček

// yarn 
yarn add react-native-config

// npm 
npm install react-native-config --save

V systému iOS také spusťte pod instalaci po instalaci balíčku.

A pod řádkem kódu na android/app/build.gradle použít plugin

apply plugin: "com.android.application"
apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle" // <- add this line

Vytvořte soubory .env pro každou konfiguraci

.env.development

ENV=development
API_URL=https://api.dev.com

.env.staging

ENV=staging
API_URL=https://api.staging.com

.env.production

ENV=production
API_URL=https://api.com

Nastavení pro Android

Nyní musíme definovat envConfigFiles v build.gradle přidružení sestavení k souborům env. Chcete-li toho dosáhnout, přidejte níže uvedený kód před voláním Apply from a nezapomeňte ponechat malá písmena pro sestavení.

android/app/build.gradle

apply plugin: "com.android.application"

// add this block
project.ext.envConfigFiles = [
   productiondebug: ".env.production",
   productionrelease: ".env.production",
   developmentrelease: ".env.development",
   developmentdebug: ".env.development",
   stagingrelease: ".env.staging",
   stagingdebug: ".env.staging"
]
// ---

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

Přidání příchuti produktu do projektu pod řádek compileSdkVersion

android/app/build.gradle

android {
    ndkVersion rootProject.ext.ndkVersion
    compileSdkVersion rootProject.ext.compileSdkVersion

    // add this block
    flavorDimensions "default"
    productFlavors {
        production {
            minSdkVersion rootProject.ext.minSdkVersion
            applicationId "com.zenix"
            targetSdkVersion rootProject.ext.targetSdkVersion
            resValue "string", "build_config_package", "com.zenix"
        }
        staging {
            minSdkVersion rootProject.ext.minSdkVersion
            applicationId "com.zenix.staging"
            targetSdkVersion rootProject.ext.targetSdkVersion
            resValue "string", "build_config_package", "com.zenix"
        }
        development {
            minSdkVersion rootProject.ext.minSdkVersion
            applicationId "com.zenix.development"
            targetSdkVersion rootProject.ext.targetSdkVersion
            resValue "string", "build_config_package", "com.zenix"
        }
    }
   // ---
...

Názvy by se měly shodovat na základě productFlavors , takže productiondebug bude odpovídat ladění v tomto případě a vygenerujte sestavení ladění aplikace s konfigurací z .env.production .

Přidejte také odpovídajícíFallbacksbuildTypes Jak je ukázáno níže:
android/app/build.gradle

 buildTypes {
        debug {
            signingConfig signingConfigs.debug
            matchingFallbacks = ['debug', 'release'] // <- add this line
        }
        release {
            signingConfig signingConfigs.debug
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }

Vytvářejte skripty na package.json

"android:staging": "react-native run-android --variant=stagingdebug",
"android:staging-release": "react-native run-android --variant=stagingrelease",
"android:dev": "react-native run-android --variant=developmentdebug",
"android:dev-release": "react-native run-android --variant=developmentrelease",
"android:prod": "react-native run-android --variant=productiondebug",
"android:prod-release": "react-native run-android --variant=productionrelease",

Android Změnit název aplikace a ikonu aplikace

Stačí zkopírovat android/app/main složku a přejmenujte ji na odkazující názvy umístěné v příchutích v našem případě jsme ji vložili
development a staging .

  • Duplikovat hlavní soubor

  • Přejmenujte soubor na development nebo staging a odstraňte soubor java

  • Chcete-li změnit ikony aplikací, stačí je přidat do konkrétní mipmapy vývoje sestavení, fáze nebo hlavní (výroby).

  • Chcete-li změnit název aplikace, otevřete soubor a přejmenujte

android/app/src/development/res/values/strings.xml

<resources>
    <string name="app_name">zenix dev</string>
</resources>

android/app/src/staging/res/values/strings.xml

<resources>
    <string name="app_name">zenix stg</string>
</resources>
  • Výsledek by měl vypadat takto

Nastavení pro iOS

  • Dvakrát duplikujte schéma na Xcode

  • Klikněte pouze na duplikát

  • Přejmenujte cíl na Cíl Vývojář a Cíl Stg

  • Výsledek by měl být takový:

  • V dalším kroku otevřete správu schémat

  • Zkontrolujte, zda byly názvy správně změněny
    kopie zenix na zenixDev

  • Teď my

  • Vyberte nastavení sestavení schématu stejné jako u vybraného schématu a přidejte tento skript
    cp "${PROJECT_DIR}/../.env.development" "${PROJECT_DIR}/../.env.development"

Upravit schéma> Sestavit> Předběžné akce

  • Opakujte stejný postup pro předběžné akce režimu ladění

  • Po dokončení konfigurace vývoje musíme provést stejný proces pro staging, změnit skript z development na staging

  • Správně pojmenujte soubory info.plist každého schématu

  • Přejmenujte info.plist v nastavení sestavení vývojářů
    Schéma*Vývoj *> Nastavení sestavení> Filtr vyhledávání> Soubor info.plist
    zenix dev-Info.plist

  • Přejmenujte info.plist v nastavení sestavení vývojářů
    Schéma*Stg *> Nastavení sestavení> Filtr vyhledávání> Soubor info.plist
    zenix stg-Info.plist

  • Otevřete Podfile a změňte cíl na abstract_target a přejmenujte abstract_target na ProjectName +CommonPods jako:

target 'zenix' do // <- Remove this

abstract_target 'zenixCommonPods' do // <- Add this
  • Do atributu abstract_target přidejte cíle
 target 'zenixDev' do
 end

 target 'zenixStg' do
 end

 target 'zenix' do
 end
  • Nyní stačí nainstalovat modul do složky ios

iOS Změnit ikonu aplikace a název aplikace

  • Vyberte cílový název a přejděte na obecné a vyhledejte Zobrazovaný název

  • Dále dole bude ikona aplikace, stačí vybrat jinou ikonu aplikace

  • Výsledek by měl být takto:

Viz zdrojový kód

https://github.com/LeonArantes/react-native-multilpe-enviroments