整体框架
react的整体示意图可以用下面图表示，我们所编写的js代码可以在各个平台上运行，这让我们有web的开发效率的同时又有了原生应用的体验。
Native->JS
从原生组件传递属性到React Native
通过RCTRootView的初始化函数你可以将任意属性传递给React Native应用。参数initialProperties必须是NSDictionary的一个实例。这一字典参数会在内部被转化为一个可供JS组件调用的JSON对象。
原生oc代码：
NSArray *textArr = @[@"oc->Rn",
@"cp"];
NSDictionary *props = @{@"textArr" : textArr};
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"RNDemo"
initialProperties:props
launchOptions:launchOptions];
从原生组件更新属性到React Native
RCTRootView同样提供了一个可读写的属性appProperties。在appProperties设置之后，React Native应用将会根据新的属性重新渲染。当然，只有在新属性和之前的属性有区别时更新才会被触发。
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
NSArray *textArr1 = @[@"oc->Rn111",
@"cp111"];
rootView.appProperties = @{@"textArr" : textArr1};
});
JS->Native，JS调用Native
让我们先来看看native如何创建一个模块然后暴露给js层调用的，具体的可以参考官方文档，我们这里举个简单的例子，创建一个加密模块：
#import "RNCrypt.h"
#import "AESCrypt.h"
#define AES_KEY_CODE @"1dbasdjasdnakfneaklfeamnklfmael"
@implementation RNCrypt
RCT_EXPORT_MODULE(RNCrypt)
RCT_EXPORT_METHOD(Encrypt:(NSString *)sourceString resolve:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject) {
NSString *encryptCode = [AESCrypt encrypt:sourceString password:AES_KEY_CODE];
resolve([NSString stringWithFormat:@"da%@das", encryptCode]);
}
RCT_EXPORT_METHOD(Decrypt:(NSString *)sourceString resolve:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject) {
resolve([AESCrypt decrypt:sourceString password:AES_KEY_CODE]);
}
@end
我们先来看看这上面的两个宏定义：
- RCT_EXPORT_MODULE()
在native层创建的模块需要通过这个宏定义将该模块暴露给js，该宏定义的具体实现也很简单，如下：
#define RCT_EXPORT_MODULE(js_name) \
RCT_EXTERN void RCTRegisterModule(Class); \
+ (NSString *)moduleName { return @#js_name; } \
+ (void)load { RCTRegisterModule(self); }
首先它将RCTRegisterModule这个函数定义为extern，这样该函数的实现对编译器不可见，但会在链接的时候可以获取到；同时声明一个moduleName函数，该函数返回该模块的js名称，如果你没有指定，默认使用类名；最后声明一个load函数（当应用载入后会加载所有的类，load函数在类初始化加载的时候就调用），然后调用RCTRegisterModule函数注册该模块，该模块会被注册添加到一个全局的数组RCTModuleClasses中。
- RCT_EXPORT_METHOD()
要暴露给js调用的API接口需要通过该宏定义声明，该宏定义会额外创建一个函数，形式如下
RCT_EXPORT_METHOD(Encrypt:(NSString *)sourceString resolve:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject) {
NSString *encryptCode = [AESCrypt encrypt:sourceString password:AES_KEY_CODE];
resolve([NSString stringWithFormat:@"da%@das", encryptCode]);
}
然后在ReactNative中这样调用
首先，先导入和声明原生模块：
// 导入NativeModules
import { NativeModules } from 'react-native';
// 声明AESUtils
const AESUtils = NativeModules.RNCrypt;
然后，再进行调用
AESUtils.Encrypt('123456').then(CryptPwd => {
//打印加密后的字符串
alert(CryptPwd)
}).catch(()=>{})
这样就是js调用了oc的加密方法，js传字符串给oc的方法，oc调用后再把返回值传给js
