React Native Android & Ios 環境變數設定 : 初步設定及 Android 篇

一、使用 react native config 管理環境變數設定

1.安裝 react native config 套件

打開 terminal 確定目前位置是你的專案的資料夾輸入

npm install react-native-config

這邊要留意的是如果你安裝的 React Native 版本是 0.60 以下，則需要加上

react-native link react-native-config

2. Android 設定

在 android/app /build.gradle 中，

apply plugin:"com.android.application"下方加入：

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

3. Ios 設定

在 terminal 輸入

cd ios && pod install

二、建立 .env 檔案

1.在專案根目錄分別加入不同環境變數的檔案，在檔案中加入你想管理的環境變數

三、Android 整合環境變數設定

1. 在 android/app /build.gradle 中，定義好每個環境的 env 檔案。找到apply plugin:"com.android.application"下方加入：

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

再往下方找到

compileSdkVersion rootProject.ext.compileSdkVersion

在其下方加入：

flavorDimensions "default"
    productFlavors {
        production {
// Define the minimum SDK version for this product flavor
minSdkVersion rootProject.ext.minSdkVersion
// Define the application id for this product flavor
applicationId "com.yourappid" // 你的 app id
// Define the target SDK version for this product flavor
targetSdkVersion rootProject.ext.targetSdkVersion
// Define the package name for this product flavor
resValue "string", "build_config_package", "com.yourappid"
        }
        staging {
            minSdkVersion rootProject.ext.minSdkVersion
            applicationId "com.yourappid.staging"
            targetSdkVersion rootProject.ext.targetSdkVersion
            resValue "string", "build_config_package", "com.yourappid"
            applicationIdSuffix ".development"
        }
        development {
            minSdkVersion rootProject.ext.minSdkVersion
            applicationId "com.yourappid"
            targetSdkVersion rootProject.ext.targetSdkVersion
            resValue "string", "build_config_package", "com.yourappid"
       }

            applicationIdSuffix ".development"
}
    }

再往下找到 buildTypes 新增以下：

buildTypes {
 debug {
  signingConfig signingConfigs.debug
  matchingFallbacks = ['debug', 'release'] //新增這行
 }
 release {
  .....
 }
}

以上實作可參考 https://github.com/wintersprouter/RN-multiple-environment-setup/commit/7e04eb3ad31eecbe840425e45c43432e25fd6ee9

2. 依照環境不同顯示不同的 app 名稱

(1). 複製 android/app/src/main 資料夾到android/app/src，資料夾分別改名 development 和 staging 並且刪除裡面的 java 資料夾(main 就是正式環境，所以 production 不需額外複製)

(2).依照環境設定不同的 app 名稱

根據以下路徑 android/app/src/development/res/values/strings.xml

<resources>
  <string name="app_name">project.dev</string> // 填入 app 名稱
</resources>

3.設定 script 指定檔

是在 package.json 設定 script

    "android:staging": "react-native run-android --mode=stagingdebug",
    "android:staging-release": "react-native run-android --mode=stagingrelease",
    "android:dev": "npx react-native run-android --mode=developmentdebug --appIdSuffix development",
    "android:dev-release": "npx react-native run-android --mode=developmentrelease --appIdSuffix development",
    "android:dev-release-aab": "cd android && ./gradlew bundleDevelopmentRelease",
    "android:dev-release-apk": "cd android && ./gradlew assembleDevelopmentRelease",
    "android:prod": "npx react-native run-android --mode=productiondebug",
    "android:prod-release": "npx react-native run-android --mode=productionrelease",
    "android:prod-release-aab": "cd android && ./gradlew bundleProductionRelease",
    "android:prod-release-apk": "cd android && ./gradlew assembleProductionRelease",

4.重新建構你的 React Native 應用程式：

yarn android

如此一來便可在模擬器上同時開啟三種環境的 app 不會混淆了～

5. 檔案中引入環境變數

import Config from 'react-native-config';
const DOMAIN = Config.API_URL;

Android 的部分到這裡就大功告成！