Configuration and use of react native config

2021-08-27 08:16:58

problem

Used to react-native My little friend should return to this question , It is the frequent change of code variables in actual development , Change environment variables in a hard coded way , Such a development experience is very bad , In addition, it is easy to submit unchanged variables to the main branch in the test phase , As a result, the online environment was not switched （ Although this possibility is relatively small ）. Is there a more convenient way , To solve the problem of environment variables ？ There has to be ！ Through my research ,react-native-config This project is very suitable to solve this problem , And it supports multi environment variable switching , It is very suitable for later configuration of multiple environment variables .

How do you use it?

Copy code

IOS To configure

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

Add library ： Link library to project

Android To configure

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

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

MainApplication.java

+ import com.lugg.ReactNativeConfig.ReactNativeConfigPackage;

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

Copy code

Particular attention , Need to be in build.gradle File to add （ Or it won't work ）

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

Multi environment configuration

• First step ： stay rn Project root , Generate .env、.env.release 、.env.production Configuration files for multiple environments 、 Each file corresponds to an environment
• The second step ： stay package.json In the document , The configuration script ： "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", // Android packaging "ios": "react-native run-ios", "ios-pro": "ENVFILE=.env.production react-native run-ios"

The default is to execute .env Configuration of , You can specify the environment at run time

Notice here ios Instructions cannot be used when packaging , A separate configuration file is required .

IOS Multi environment file configuration

• Generate the file

Xcode Generate scheme file , Each environment corresponds to a file

• To configure ： scheme... -> Build -> Pre-actions

cp " ${PROJECT_DIR}/../.env.production" "${PROJECT_DIR}/../.env" # replace .env.production for your file

• stay build Check inside （ This step is very important ）

• Use

Switch when compiling scheme file

• Existing problems

ios When compiling , Will be able to Using the environment file will overwrite .env file , Suggest .env stay commit Don't submit

Usage method

import Config from "react-native-config";

Config.API_URL; // 'https://myapi.com' //  The field corresponding to the value , The values in the configuration file are all characters
Copy code

• Each time you switch the environment, you need to execute the command first
• ios Instructions cannot be used only when packaging , Need to switch scheme File to specify the compilation environment

summary

On the whole , Configure this react-native-config The process is complicated , But after my above configuration , It can be realized in RN Use environment variables happily in the project , At the same time, it can support multi environment configuration , The development experience is quite friendly .

Due to the market introduction react-native-config The quality of your articles is not perfect , But when you encounter problems, go to the configuration introduction on the official website several times , It's more detailed .

Reference address ： github.com/luggit/reac…