React Native能否仅用官方工具创建安卓/iOS自定义构建变体？

核心结论：针对你当前使用的版本组合（npm 6.14.10、RN 0.63.4、React 17.0.1），完全可以通过RN生态的统一工具链实现development/QA/prod三类自定义环境的双端一致构建，全程无需手动编辑原生平台配置文件，所有环境参数双端同步读取，不会出现逻辑不一致的问题。

核心逻辑 #

RN的构建变体本质上依托原生平台的构建体系（Android的buildType、iOS的Scheme），但你不需要手动编写任何原生侧配置代码——所有需要区分环境的参数，都可以通过项目根目录的统一配置文件管理，RN CLI会自动把参数注入到双端的构建流程中，实现“一套配置、双端生效”的效果。

具体操作步骤（无手动原生文件修改） #

• 安装适配当前版本的环境变量管理依赖
  执行npm i -D react-native-dotenv@0.2.5 dotenv，这个版本的依赖完全适配你当前的RN 0.63.4和Babel配置，安装过程不会改动任何Android、iOS目录下的原生文件。
• 在项目根目录创建分环境的变量文件
  分别新建.env.development、.env.qa、.env.production三个文件，写入同一套规则的环境参数，比如：

  # .env.development
  ENV_ID=dev
  API_BASE=https://dev-api.xxx.com
  APP_NAME=我的App(开发版)
  

  # .env.qa
  ENV_ID=qa
  API_BASE=https://qa-api.xxx.com
  APP_NAME=我的App(QA版)
  

  # .env.production
  ENV_ID=prod
  API_BASE=https://api.xxx.com
  APP_NAME=我的App
  

• 配置Babel规则，统一读取环境变量
  修改项目根目录下的babel.config.js，新增dotenv插件配置，不需要调整任何其他配置：

  module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
      ['module:react-native-dotenv', {
        moduleName: '@env',
        path: '.env',
        allowUndefined: true
      }]
    ]
  };
  

• 用RN CLI内置命令切换构建变体
  所有双端操作共用同一套参数，不需要分别编写端侧专属命令：
  • 启动开发环境调试：运行npx react-native run-android --mode=development、npx react-native run-ios --mode=development，CLI会自动加载对应的环境变量文件
  • 启动QA环境调试：运行ENVFILE=.env.qa npx react-native run-android、ENVFILE=.env.qa npx react-native run-ios
  • 打正式生产包：运行npx react-native build-android --mode=production、npx react-native build-ios --mode=production

必须注意的版本适配约束 #

• 依赖版本不能错配：你当前使用的RN 0.63.4不支持react-native-dotenv 3.x以上的版本，必须固定安装0.2.5版本，否则会出现双端读取变量不一致、Metro打包失败的问题
• 配置范围要统一：所有分环境的参数文件都放在项目根目录，不要把环境变量文件放到Android或iOS目录下，否则会破坏CLI的自动注入逻辑
• 原生资源的边界：应用图标、启动页这类静态原生资源，还是需要提前在原生项目目录放置好对应版本，无法通过JS层动态修改——但接口地址、功能开关、原生SDK的环境key这类逻辑参数，完全可以通过上述方案统一注入
• 变量格式限制：你当前搭配的react-scripts 4.0.2和Metro打包器，对环境变量的特殊字符兼容性较差，不要在变量值里写包含引号、换行的内容，避免打包时变量被截断
• 不要手动修改原生配置：如果手动编辑了android/app/build.gradle、iOS项目的Info.plist这类文件，会导致CLI的自动参数注入能力失效，反而出现端侧环境不一致的问题

内容的提问来源于stack exchange，提问作者a curious guy