一、多環(huán)境使用場(chǎng)景及目的

1.在開(kāi)發(fā)過(guò)程中，肯定會(huì)使用多種環(huán)境來(lái)進(jìn)行測(cè)試，如：test 、pre等，以前使用原生開(kāi)發(fā)時(shí)，都是通過(guò)宏定義，在pch文件中進(jìn)行判斷，但是現(xiàn)在開(kāi)發(fā)react-native，要使react-native和原生都能共用環(huán)境變量值，就需要改一下實(shí)現(xiàn)方式：

2.避免手動(dòng)修改，防止帶來(lái)不必要的麻煩

3.可以在同一手機(jī)上安裝不同環(huán)境APP，并能很好區(qū)分

二、環(huán)境配置

1.新建configuration

1、使用xcode打開(kāi)你的react-native項(xiàng)目中ios的.xcworkspace文件
2、選擇你的項(xiàng)目->PROJECT->info

1.png

這里我創(chuàng)建了兩個(gè)debug環(huán)境，一個(gè)pre一個(gè)test，接下來(lái)選擇你的TARGESTS，我這里有兩個(gè)target，用來(lái)一套代碼發(fā)布不同APP。

2.配置預(yù)編譯宏定義

接下來(lái)創(chuàng)建每個(gè)環(huán)境的宏定義，可以利用宏定義進(jìn)行一些判斷

2.png

3.切換環(huán)境方式

1.在Xcode菜單欄選擇Product->Scheme->New Scheme
確定Target并命名Name
2.選擇Edit Scheme,將左側(cè)的Run、Test、Analyze的Debug選擇成自己定義的環(huán)境，和自己新建的Scheme相對(duì)應(yīng)

3.png

每個(gè)Target可以根據(jù)不同的環(huán)境創(chuàng)建Scheme，在xcode中運(yùn)行項(xiàng)目時(shí)，選擇不同的Scheme就可以了，

三、Bundle Id和Display name的配置

1.選擇你的項(xiàng)目->PROJECT->Build Setting 下面的?添加User-Definne

2.分別添加APP_BUNDLE_ID 和APP_DISPLAY_NAME兩項(xiàng)，并配置各環(huán)境相對(duì)應(yīng)的值。

4.png

5.png

四、創(chuàng)建環(huán)境配置文件

1.創(chuàng)建.env文件

6.png

這是我創(chuàng)建的不同環(huán)境下的.env

7.png

BAIDU_MAP_KEY=https://test.ttcdw.com.cn/p/passport/
aaaa=1234
aabb=12345

.env.pre

BAIDU_MAP_KEY=https://pre.ttcdw.com.cn/p/passport/
aaaa=55555
aabb=789

2.讀取不同環(huán)境的.env文件
以下是我創(chuàng)建的讀取GeneratedDotEnv文件，GeneratedDotEnv.h

#import <Foundation/Foundation.h>

NS_ASSUME_NONNULL_BEGIN

@interface GeneratedDotEnv : NSObject
+ (NSDictionary *)env;
@end

NS_ASSUME_NONNULL_END

GeneratedDotEnv.m

#import "GeneratedDotEnv.h"

@implementation GeneratedDotEnv
+ (NSDictionary *)env {
  NSString *filename = @".env";
#ifdef App_Env_Test
  filename = @".env.test";

#elif App_Env_Pre

  filename = @".env.pre";

#endif

    NSString *envPath = [[NSBundle mainBundle] pathForResource:filename ofType:nil];
    NSString *envContent = [NSString stringWithContentsOfFile:envPath encoding:NSUTF8StringEncoding error:nil];
    NSArray *envLines = [envContent componentsSeparatedByCharactersInSet:[NSCharacterSet newlineCharacterSet]];
    NSMutableDictionary *envDictionary = [NSMutableDictionary dictionary];
    for (NSString *line in envLines) {
        NSArray *pair = [line componentsSeparatedByString:@"="];
        if ([pair count] > 1) {
            NSString *key = [pair objectAtIndex:0];
            NSString *value = [pair objectAtIndex:1];
            [envDictionary setObject:value forKey:key];
        }
    }
    return envDictionary;
}
@end

根據(jù)不同的環(huán)境宏定義，讀取不同的環(huán)境文件
3.創(chuàng)建與react-native交互的RCTBridgeModule
以下是我創(chuàng)建的RCTBridgeModule，EnvConfig.h文件代碼

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
NS_ASSUME_NONNULL_BEGIN

@interface EnvConfig : NSObject<RCTBridgeModule>

@end

NS_ASSUME_NONNULL_END

EnvConfig.m文件代碼

#import "EnvConfig.h"
#import "GeneratedDotEnv.h"

@implementation EnvConfig
+ (BOOL)requiresMainQueueSetup {
  return YES;
}

- (NSDictionary *)constantsToExport {
    NSMutableDictionary *constants = [NSMutableDictionary dictionary];
    NSDictionary *env = [GeneratedDotEnv env];
    
    for (NSString *key in env) {
        [constants setObject:[env objectForKey:key] forKey:key];
    }
    
    return constants;
}

RCT_EXPORT_MODULE()


@end

五、讀取變量及react-native中配置運(yùn)行命令

1.在ios原生讀取環(huán)境變量，利用以下方式：

#import "GeneratedDotEnv.h"

NSDictionary *env = [GeneratedDotEnv env];
  NSString *baiduMapKey = env[@"BAIDU_MAP_KEY"];
  NSString *aaaa = env[@"aaaa"];
  NSString *aabb = env[@"aabb"];
  NSLog(@"baiduMapKey=%@,aaaa=%@,aabb=%@",baiduMapKey,aaaa,aabb);

2.在react-native讀取環(huán)境變量，利用以下方式：

import {NativeModules} from 'react-native';
const EnvConfig = NativeModules.EnvConfig || {};
  <Text style={styles.title}>{EnvConfig.BAIDU_MAP_KEY}</Text>
  <Text style={styles.title}>{EnvConfig.aaaa}</Text>
  <Text style={styles.title}>{EnvConfig.aabb}</Text>

使用點(diǎn)方法就可以直接獲取不同環(huán)境下的變量值

3.設(shè)置運(yùn)行命令
在react-native package.json 下修改"scripts",新增你的不同環(huán)境運(yùn)行命令，如：

"ios-s-test": "react-native run-ios --scheme=XX_Test --configuration Debug_Test",
    "ios-s-pre": "react-native run-ios --scheme=XX_Pre --configuration Debug_Pre",
    "ios-v-test": "react-native run-ios --scheme=OO_Test --configuration Debug_Test",
    "ios-v-pre": "react-native run-ios --scheme=OO_Pre --configuration Debug_Pre",

XX 和OO代表你新創(chuàng)建的Scheme。
OK，一切結(jié)束！