React Native：如何根据构建类型注入不同功能实现？

嘿，既然你有Android Gradle的背景，那理解React Native里的多环境实现切换肯定没压力——这思路和Gradle的源集简直异曲同工，就是给不同构建类型（dev/acc/prod/mock）准备各自的代码实现，再让构建工具自动帮我们切换。下面给你几种实用的方案，挑适合你的来：

方案1：文件拆分+环境变量导入（最贴近Gradle源集思路） #

这个方案完全对应你熟悉的Gradle多源集逻辑：给每个环境单独写代码文件，再通过环境变量告诉RN该用哪一份。

• 第一步：拆分环境专属文件
  在项目里创建类似这样的目录结构：

  src/api/
  ├─ login.dev.js
  ├─ login.acc.js
  ├─ login.prod.js
  └─ login.mock.js
  

  每个文件写对应环境的login实现：

  • login.mock.js直接返回模拟值：

    export const login = (uname, pswd) => true;
    

  • 其他环境的文件调用真实接口：

    import { service_login } from './service';
    export const login = (uname, pswd) => service_login(uname, pswd);
    

• 第二步：写一个统一入口文件
  创建src/api/login.js，根据环境变量动态导入对应文件：

  // 读取构建类型环境变量，默认用dev
  const buildType = process.env.BUILD_TYPE || 'dev';
  // ES模块动态导入
  export const login = (await import(`./login.${buildType}.js`)).login;
  

• 第三步：配置构建命令注入环境变量
  在package.json的scripts里添加不同环境的启动/构建命令：

  "scripts": {
    "start:dev": "BUILD_TYPE=dev react-native start",
    "start:acc": "BUILD_TYPE=acc react-native start",
    "start:prod": "BUILD_TYPE=prod react-native start",
    "start:mock": "BUILD_TYPE=mock react-native start",
    "build:android:acc": "BUILD_TYPE=acc react-native run-android --variant=releaseAcc"
  }
  

  如果你想和Android Gradle的buildTypes绑定，还可以在android/app/build.gradle里把RN的环境变量同步过去：

  buildTypes {
      releaseAcc {
          initWith release
          // 给RN传递构建类型标识
          buildConfigField "String", "BUILD_TYPE", "\"acc\""
          resValue "string", "build_type", "acc"
      }
      // 同理配置dev/prod/mock的buildType
  }
  

方案2：Babel插件动态替换导入路径（更灵活） #

用Babel插件帮我们自动替换导入路径，不用手动写动态导入逻辑，更省心。

• 第一步：安装babel插件

  npm install babel-plugin-module-resolver --save-dev
  

• 第二步：配置Babel根据环境切换别名
  修改babel.config.js，根据环境变量设置文件别名：

  const buildType = process.env.BUILD_TYPE || 'dev';
  
  module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
      [
        'module-resolver',
        {
          alias: {
            // 把@api/login指向对应环境的文件
            '@api/login': `./src/api/login.${buildType}.js`,
          },
        },
      ],
    ],
  };
  

• 第三步：业务代码直接用别名导入
  不管什么环境，代码里都统一写：

  import { login } from '@api/login';
  login("foo", "bar");
  

  Babel会自动根据当前的BUILD_TYPE替换成对应的文件，和Gradle自动切换源集的体验一模一样。

方案3：用React Native Config管理（官方推荐的环境配置工具） #

如果你的项目还需要管理其他环境配置（比如接口地址、密钥），可以用react-native-config，它也能顺便实现函数的环境切换。

• 第一步：安装依赖

  npm install react-native-config --save
  

• 第二步：创建多环境配置文件
  项目根目录下创建：

  • .env.dev
  • .env.acc
  • .env.prod
  • .env.mock
    每个文件里添加构建类型标识：

  BUILD_TYPE=mock
  

• 第三步：在代码里根据配置切换实现

  import Config from 'react-native-config';
  
  let login;
  switch(Config.BUILD_TYPE) {
    case 'mock':
      login = (uname, pswd) => true;
      break;
    default:
      import { service_login } from './service';
      login = (uname, pswd) => service_login(uname, pswd);
  }
  
  export { login };
  

• 第四步：配置构建命令指定环境文件
  在package.json里：

  "scripts": {
    "start:mock": "ENVFILE=.env.mock react-native start",
    "build:android:mock": "ENVFILE=.env.mock react-native run-android --variant=releaseMock"
  }
  

总的来说，这几种方案的核心逻辑和你熟悉的Gradle源集一致：用构建类型标识区分环境，加载对应环境的代码实现，选哪个就看你项目的复杂度和个人习惯啦。

内容的提问来源于stack exchange，提问作者Pablo Espantoso