分类: 技术

React Native 集成至已有 APP — 双向通信 I

背景

因为之前用 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 这个方向通信方式的思路,并没有给出完整代码。自己也正在找逆向通信的解决方法,解决后会另起一篇记录。

注:转载注明出处并联系作者,本文链接:https://nodefe.com/communication-between-ios-and-react-native-one/

发表评论

评论

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Webmentions

  • React Native 集成至已有 APP —— 双向通信(二) | jzguo's blog

    […] 承接上一篇介绍的 react-native 和已有 APP 之间的双向通信问题,本篇介绍另一个方向的通信,即:appCon -> appChild。 […]