current position:Home>Configuration and use of react native config

Configuration and use of react native config

2021-08-27 08:16:58 Dreamer 2020

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?

install

yarn add react-native-config
 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

android/settings.gradle

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

android/app/build.gradle

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 " P R O J E C T D I R / . . / . e n v . p r o d u c t i o n " " {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 
Config.GOOGLE_MAPS_API_KEY; // 'abcdefgh'
 Copy code 

Use advice

  • 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…

copyright notice
author[Dreamer 2020],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827081655152v.html

Random recommended