一、多环境使用场景及目的

1.在开发过程中，肯定会使用多种环境来进行测试，如：test 、pre等，以前使用原生开发时，都是通过宏定义，在pch文件中进行判断，但是现在开发react-native，要使react-native和原生都能共用环境变量值，就需要改一下实现方式：

2.避免手动修改，防止带来不必要的麻烦

3.可以在同一手机上安装不同环境APP，并能很好区分

二、环境配置

1.新建configuration

1、使用xcode打开你的react-native项目中ios的.xcworkspace文件
2、选择你的项目->PROJECT->info

1.png

这里我创建了两个debug环境，一个pre一个test，接下来选择你的TARGESTS，我这里有两个target，用来一套代码发布不同APP。

2.配置预编译宏定义

接下来创建每个环境的宏定义，可以利用宏定义进行一些判断

2.png

3.切换环境方式

1.在Xcode菜单栏选择Product->Scheme->New Scheme
确定Target并命名Name
2.选择Edit Scheme,将左侧的Run、Test、Analyze的Debug选择成自己定义的环境，和自己新建的Scheme相对应

3.png

每个Target可以根据不同的环境创建Scheme，在xcode中运行项目时，选择不同的Scheme就可以了，

三、Bundle Id和Display name的配置

1.选择你的项目->PROJECT->Build Setting 下面的➕添加User-Definne

2.分别添加APP_BUNDLE_ID 和APP_DISPLAY_NAME两项，并配置各环境相对应的值。

4.png

5.png

四、创建环境配置文件

1.创建.env文件

6.png

这是我创建的不同环境下的.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.读取不同环境的.env文件
以下是我创建的读取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

根据不同的环境宏定义，读取不同的环境文件
3.创建与react-native交互的RCTBridgeModule
以下是我创建的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中配置运行命令

1.在ios原生读取环境变量，利用以下方式：

#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读取环境变量，利用以下方式：

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>

使用点方法就可以直接获取不同环境下的变量值

3.设置运行命令
在react-native package.json 下修改"scripts",新增你的不同环境运行命令，如：

"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代表你新创建的Scheme。
OK，一切结束！