ReactNative之通信机制

整体框架

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