背景

因为之前用 react 开发了部门内部的技术分享网站，加之手上负责一个 WAP 业务模块。因为是 APP 内嵌的 h5 页面，也没有做过优化处理，所以考虑使用 react-native 重新实现一遍该模块改善体验。

经过1个月开发，产品作为独立 APP 开发完成，但经过与PM讨论，还是决定将它作为一个功能模块嵌入一个已有的 APP 中（下文简称 appCon，新的模块成为 appChild）。这就遇到几个需要考虑的点：

• 如何将代码嵌入已有 appCon；
• 如何实现 appCon 和 appChild 之间的双向通信。

其中双向通信有这样两个场景：

1. appChild 中点击一个 button 会自动唤醒 appCon 中的聊天功能；
2. appCon 中点击一个链接会自动跳转到 appChild 中的订单详情页。

本文先来实现上述第一点：appChild -> appCon 的通信。

实现

思路是在 appCon 中创建一个自定义模块，其中的方法理所当然可以调用 appCon 中其它部分的功能代码，比如唤醒聊天。然后通过 react-native 提供的方法将该模块暴露给我们 rn 模块的 js 代码。这样在 js 中调用相应的方法，会将代码执行控制权交给 appCon，调用聊天功能。本文假设读者已经了解如何编写自定义 native 模块。

1. appCon 部分功能实现

首先要在 appCon 中新建一个 自定义module，假设为JZTestManager，并且实现RCTBridgeModule这个 protocol。

然后将该模块暴露给我们的 js 模块：

最后在编写相应的方法作为接口暴露给 js 代码，对于本例，就是实现唤醒聊天功能：

以上就完成了 appCon 部分的功能。

2. appChild 功能实现

在上一小节，我们创建了一个自定义 module 并且将其暴露给我了我们的 rn 模块，所以我们只要在我们的 js 代码中加载对应模块并且执行相应的方法即可：

只要执行上述处理方法，即可唤醒聊天功能。

最后

本文只是记录了从 appChild -> appCon 这个方向通信方式的思路，并没有给出完整代码。自己也正在找逆向通信的解决方法，解决后会另起一篇记录。