如何在CircleCI构建的React Native应用中使用react-native-config

1. CircleCI 侧配置敏感变量 #

• 登录CircleCI，进入目标项目的Project Settings > Environment Variables，添加你的敏感变量（如API_KEY、SECRET_TOKEN），这些变量会被加密存储，不会暴露在构建日志中。
• 项目根目录的.circleci/config.yml无需额外配置，CircleCI会自动将环境变量注入到构建环境中。

2. iOS 端配置（将变量注入App） #

方法1：通过BuildConfig传递（推荐，更安全） #

• 在Xcode中进入项目的Build Settings > User-Defined，添加变量占位符（如API_KEY），值设为$(API_KEY)。
• 在CircleCI的config.yml的iOS构建步骤前，添加注入脚本：

  jobs:
    build-ios:
      steps:
        - run:
            name: Inject iOS env vars
            command: |
              xcodebuild -project ios/[你的项目名].xcodeproj -target [你的项目名] -configuration Release API_KEY="$API_KEY" build
  

• 编写iOS原生模块读取变量并暴露给RN：在EnvManager.m中通过Bundle.main.object(forInfoDictionaryKey: "API_KEY")获取值，再用RCT注解导出方法。

方法2：替换Info.plist占位符 #

• 在Info.plist中添加占位符，比如<key>API_KEY</key><string>API_KEY_PLACEHOLDER</string>。
• 在CircleCI构建脚本中用sed替换：

  sed -i '' 's/API_KEY_PLACEHOLDER/'$API_KEY'/g' ios/[你的项目名]/Info.plist
  

• 注意：此方式敏感值会被打包进Info.plist，存在反编译泄露风险，仅适用于敏感度较低的变量。

3. Android 端配置（将变量注入App） #

方法1：通过BuildConfig传递（推荐） #

• 在android/app/build.gradle的defaultConfig块中添加：

  defaultConfig {
      // ...其他原有配置
      buildConfigField "String", "API_KEY", "\"${System.getenv('API_KEY')}\""
  }
  

• 构建时CircleCI的API_KEY会自动注入到BuildConfig，后续通过原生模块读取并暴露给RN。

方法2：生成gradle.properties #

• 在CircleCI构建脚本中生成包含敏感变量的配置文件：

  echo "API_KEY=$API_KEY" >> android/gradle.properties
  

• 在build.gradle中引用该变量：

  defaultConfig {
      buildConfigField "String", "API_KEY", "\"${API_KEY}\""
  }
  

4. React Native 代码中读取变量 #

原生模块方式（无第三方依赖） #

• 编写Android原生模块示例：

  package com.yourapp;
  import com.facebook.react.bridge.ReactApplicationContext;
  import com.facebook.react.bridge.ReactContextBaseJavaModule;
  import com.facebook.react.bridge.ReactMethod;
  import com.facebook.react.bridge.Promise;
  
  public class EnvManagerModule extends ReactContextBaseJavaModule {
      public EnvManagerModule(ReactApplicationContext reactContext) {
          super(reactContext);
      }
      @Override
      public String getName() {
          return "EnvManager";
      }
      @ReactMethod
      public void getApiKey(Promise promise) {
          promise.resolve(BuildConfig.API_KEY);
      }
  }
  

• RN中调用：

  import { NativeModules } from 'react-native';
  const { EnvManager } = NativeModules;
  
  // 获取变量（生产环境禁止打印）
  EnvManager.getApiKey().then(apiKey => {
      // 后续业务逻辑处理
  });
  

第三方库方式（更便捷） #

• 使用react-native-config库直接读取原生配置：
  1. 安装：npm install react-native-config
  2. 按库文档完成iOS/Android端配置
  3. RN中直接读取：

     import Config from 'react-native-config';
     const apiKey = Config.API_KEY;
     

安全注意事项 #

• 禁止在构建日志或RN调试日志中打印敏感变量，CircleCI默认会屏蔽已配置的环境变量，但自定义脚本需自行规避。
• 优先使用BuildConfig传递变量，避免明文存储在配置文件中。
• 生产构建需关闭调试模式，防止变量被调试工具获取。

内容的提问来源于stack exchange，提问作者Hamza Hmem