混合开发：原生和RN之间如何进行通信

前言

---

无论是iOS，还是RN，如果我们完全在某个单一框架下构建应用，它们都遵循着相同的通信实现，即自上而下的通信采用属性，自下而上的通信采用回调函数（其实也是一个属性）。那么当我们采用混合开发时，某些地方也借鉴了这样的通信实现，也有些地方用到了一些特殊的、跨语言的机制来进行通信。

通过前面三篇混合开发的文章，我们已经知道了如何进行混合开发。既然是混合开发，则两端必然存在需要通信的情况，那原生和RN之间如何进行通信？其实通信的方式，我们已经在前三篇文章中全部做了透漏，只是因为前三篇文章的侧重点是如何实现混合开发，而不是侧重两端如何进行通信，所以我们没有那么去关注这些方式。因此这篇文章就简单通过前三篇文章，来回顾一下原生和RN之间如何进行通信。

自上而下的通信，采用属性

---

原生调用RN

原生调用RN时，原生相当于上，RN相当于下，因此如果原生要给RN传值，就采用属性。

// bundleURL：RN项目JS包的地址
// moduleName：该界面想要盛放哪个RN界面，要和index.js里注册的名字一致
// initialProperties：接受一个NSDictionary类型的参数，来作为RN初始化时传递给JS的初始化数据
// launchOptions：主要在AppDelegate加载JS包时使用，这里传nil就行
RCTRootView *rootView =[[RCTRootView alloc] initWithBundleURL:jsBundleURL
                                                   moduleName:@"TextAndImageView"
                                            initialProperties:@{@"name": @"Angelababy"}
                                                launchOptions: nil];
rootView.frame = CGRectMake(0, 200, rootView.frame.size.width, rootView.frame.size.height);
[self.view addSubview:rootView];

还记得这个initialProperties参数吧，我们就是通过它把数据从原生传递给RN的。

并且我们可以随时修改这个属性，

rootView.appProperties = @{@"name": @"杨颖"};

RN应用将会根据新的属性重新渲染，当然只有在新属性和之前的属性有区别时更新才会。

RN调用原生

RN调用原生时，RN相当于上，原生相当于下，因此如果RN要给原生传值，就采用属性。

#pragma mark - 导出原生View的一些属性，供RN使用

RCT_EXPORT_VIEW_PROPERTY(zoomEnabled, BOOL)
RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

还记得原生暴露出去的这些属性吧，名义上说“是供RN使用的”，但本质上却是RN在使用它们把数据传递给原生，原生再用这些值渲染原生View，你也看到了RN里和原生里都是同名属性嘛。

// 使用这些属性，把数据传递给原生，原生再用这些值渲染原生View
 {
        console.log(nativeEvent.region);
    }}
/>

自下而上的通信，采用回调函数

---

上面我们分别回顾了原生调用RN、RN调用原生时自上而下的通信，但是都没有提到自下而上的通信，接下里看看。

原生调用RN

原生调用RN时，原生相当于上，RN相当于下，因此如果RN要给原生传值，很自然的，我们会想到是不是用回调函数，但是没法实现啊！因为回调函数都是下级定义、调用，上级负责实现的，可是这里作为下级的RCTRootView根本就没有提供这样的回调函数给我们嘛！

这个好像暂时还没有办法实现，也许是我理解的不到位，如果有知道的朋友，欢迎指点。

RN调用原生

RN调用原生时，RN相当于上，原生相当于下，因此如果原生要给RN传值，就采用回调函数。

RN调用原生好像是没问题的，可以实现，因为我们原生作为下级可以提供block给RN。

#pragma mark - 导出原生View的一些属性，供RN使用

RCT_EXPORT_VIEW_PROPERTY(zoomEnabled, BOOL)
RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

// 使用这些属性，把数据传递给原生，原生再用这些值渲染原生View
 {
        console.log(nativeEvent.region);
    }}
/>

这里的onRegionChange就是一例。

此外

---

在第三篇，RN调用原生模块这篇里，我们还提到了原生暴露方法给RN，RN通过方法里的属性传值给原生，原生通过方法里的回调函数或Promise传值给RN，这也没有脱离自上而下的通信采用属性，自下而上的通信采用回调函数，因为这种情况下RN是上级，原生是下级。

这篇文章中还额外提到了使用事件RCTEventEmitter，通过类似通知的方式使得原生可以调用RN的函数，实现了原生（下级）主动给RN（上级）传递数据。

想详细了解的朋友可以去看看这篇文章。

再此外

---

有时候我们原生调用RN组件，但是不知道那个组件到底有多高（比如FlatList的自适应cell），可以布局计算流部分的实现方案。