reactnative设置多环境打包，且动态修改应用logo、name及包名

1. 首先下载@types/react-native-dotenv和react-native-dotenv。
   在根目录的.babelrc文件中添加以下代码：

{
  "plugins": [
    [
      "module:react-native-dotenv",
      {
        "envName": "ENVFILE", //这里需要设置为上面package.json对应的
        "moduleName": "react-native-dotenv",
        "path": ".env",
        "safe": false,
        "allowUndefined": true
      }
    ]
  ]
}

2. 在src/common/types目录下创建env.d.ts文件，内容如下：

declare module 'react-native-dotenv' {
    export const BASE_URL: string;
}

3. 在app/build.gradle 中添加以下代码：

   
   
   image.png

 buildTypes {
        debug {
            signingConfig signingConfigs.debug
            applicationIdSuffix ".dev"
            manifestPlaceholders = [
                    app_name      : "@string/app_name_debug",
                    app_icon      : "@mipmap/ic_launcher",
                    // //app_icon: "@mipmap/ic_launcher_debug",
                    app_round_icon: "@mipmap/ic_launcher_round"
            ]
        }
        release {
            signingConfig signingConfigs.release
            minifyEnabled enableProguardInReleaseBuilds
            // 设置manifest占位符，为了显示不同的软件名
            manifestPlaceholders = [
                    app_name      : "@string/app_name",
                    app_icon      : "@mipmap/ic_launcher",
                    app_round_icon: "@mipmap/ic_launcher_round"
            ]
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
        releaseStage.initWith(release)
        releaseStage {
            //为测试版本的包名添加.beta
            applicationIdSuffix ".stage"
            // 设置manifest占位符，为了显示不同的软件名
            manifestPlaceholders = [
                    app_name      : "@string/app_name_stage",
                    app_icon      : "@mipmap/ic_launcher",
                    //app_icon: "@mipmap/ic_launcher_stage",
                    app_round_icon: "@mipmap/ic_launcher_round"
            ]
            matchingFallbacks = ['release']
        }

        releaseTest.initWith(release)
        releaseTest {
            //为测试版本的包名添加.beta
            applicationIdSuffix ".test"
            // 设置manifest占位符，为了显示不同的软件名
            manifestPlaceholders = [
                    app_name      : "@string/app_name_test",
                    app_icon      : "@mipmap/ic_launcher",
                    // //app_icon: "@mipmap/ic_launcher_test",
                    app_round_icon: "@mipmap/ic_launcher_round"
            ]

            matchingFallbacks = ['release']
        }

    }

test和stage全部以release为基准进行测试，同时设置动态app名和icon

4. 在androidmanifest.xml中 改写label和icon：

   
   
   image.png

5. 在app/build.gralde底部添加一行代码：

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

6. 修改tsconfig.json,增加一行:

 "typeRoots": ["./common/interface"]

image.png

7. 简化命令行脚本：

   
   
   image.png

    "build-android-prod": "cd android && ENVFILE=prod ./gradlew assembleRelease",
    "build-android-test": "cd android && ENVFILE=test ./gradlew assembleReleaseTest",
    "build-android-stage": "cd android && ENVFILE=stage ./gradlew assembleReleaseStage",
    "start": "ENVFILE=dev react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "test": "jest"

8. 根目录创建shell文件

   
   
   image.png

9. 使用

image.png

[图片上传中...(image.png-94933-1704186044973-0)]

image.png

image.png