一饲化、多環(huán)境使用場景及目的

1.在開發(fā)過程中莽鸭，肯定會使用多種環(huán)境來進行測試，如：test 吃靠、pre等硫眨，以前使用原生開發(fā)時，都是通過宏定義巢块，在pch文件中進行判斷礁阁，但是現(xiàn)在開發(fā)react-native巧号，要使react-native和原生都能共用環(huán)境變量值，就需要改一下實現(xiàn)方式：

2.避免手動修改姥闭，防止帶來不必要的麻煩

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

二、環(huán)境配置

1.新建configuration

1棚品、使用xcode打開你的react-native項目中ios的.xcworkspace文件
2靠欢、選擇你的項目->PROJECT->info

1.png

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

2.配置預編譯宏定義

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

2.png

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

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

3.png

每個Target可以根據(jù)不同的環(huán)境創(chuàng)建Scheme，在xcode中運行項目時嚼锄，選擇不同的Scheme就可以了减拭，

三、Bundle Id和Display name的配置

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

2.分別添加APP_BUNDLE_ID 和APP_DISPLAY_NAME兩項区丑，并配置各環(huán)境相對應的值拧粪。

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中配置運行命令

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>

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

3.設置運行命令
在react-native package.json 下修改"scripts",新增你的不同環(huá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炉旷，一切結束！