react-native-config 的配置及使用问题

奔跑的橡皮擦
6,002 阅读2分钟

问题

用过react-native的小伙伴应该回到这个问题，就是在实际的开发中得频繁的改动代码变量，以硬编码的方式来改变环境变量，这样的开发体验十分不好，而且在提测阶段很容易把没改过来的变量提交到主分支，导致最终上线环境没切过来（尽管这种可能性比较小）。有没有一种比较方便的方式，来解决这个环境变量的问题呢？必须有！通过我的一番调研，react-native-config这个项目解决这个问题就很合适，而且它支持多环境变量切换，十分适合后期配置多个环境变量。

怎么使用

安装

yarn add react-native-config

IOS配置

In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name] Go to node_modules ➜ react-native-config and add ReactNativeConfig.xcodeproj Expand the ReactNativeConfig.xcodeproj ➜ Products folder In the project navigator, select your project. Add libReactNativeConfig.a to your project's Build Phases ➜ Link Binary With Libraries And go the Build Settings tab. Make sure All is toggled on (instead of Basic) Look for Header Search Paths and add $(SRCROOT)/../node_modules/react-native-config/ios/** as non-recursive

添加库： 将库链接到项目

Android配置

android/settings.gradle

+ include ':react-native-config'
+ project(':react-native-config').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-config/android')

android/app/build.gradle

dependencies {
	implementation "com.facebook.react:react-native:+"  // From node_modules
+	implementation project(':react-native-config')
}

MainApplication.java

+ import com.lugg.ReactNativeConfig.ReactNativeConfigPackage;

@Override
protected List<ReactPackage> getPackages() {
	   return Arrays.asList(
       		new MainReactPackage()
+      		new ReactNativeConfigPackage()
    );
}

特别注意，需要在build.gradle文件添加（不然没法生效）

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

多环境配置

  • 第一步： 在rn项目根目录，生成.env、.env.release 、.env.production等多环境的配置文件、每一个文件对应一个环境
  • 第二步： 在package.json文件里，配置脚本： "android": "react-native run-android", "android-pro": "ENVFILE=.env.production react-native run-android", "android-release": "cd android && ./gradlew assembleRelease", "android-release-pro": "cd android && ENVFILE=.env.production ./gradlew assembleRelease", // 安卓打包 "ios": "react-native run-ios", "ios-pro": "ENVFILE=.env.production react-native run-ios"

默认会执行.env的配置，在运行的时候可以指定环境

注意此处ios在打包时无法使用指令，需要单独配置文件。

IOS多环境文件配置

  • 生成文件 Xcode生成scheme文件，每个环境对应一个文件
  • 配置： scheme... -> Build -> Pre-actions cp "PROJECTDIR/../.env.production""{PROJECT_DIR}/../.env.production" "{PROJECT_DIR}/../.env" # replace .env.production for your file
  • 在build里勾选（这步很重要）
  • 使用 在编译的时候要切换 scheme 文件
  • 存在问题 ios编译的时候，会把 使用环境文件会覆盖.env文件，建议.env在commit的时候不要提交

使用方法

import Config from "react-native-config";

Config.API_URL; // 'https://myapi.com' // 取值对应的字段，配置文件里数值都是字符
Config.GOOGLE_MAPS_API_KEY; // 'abcdefgh'

使用建议

  • 每次切换环境需要先执行一下指令
  • ios只有在打包的时候无法使用指令，需要切换scheme文件来指定编译的环境

总结

总体来说，配置这个react-native-config过程比较复杂，但是经过我上面一番配置，就可以实现在RN项目里愉快的使用环境变量了，同时能够支持多环境配置，开发体验还是比较友好的。

由于市面介绍react-native-config的文章质量都不太完善，但遇到问题的时候去多看几次官网的配置介绍，还是比较详细的。

参考地址： github.com/luggit/reac…

avatar
文章
阅读
粉丝