Blog

Blog

PHODAL

WebView <-> React Native <-> Native 相互调用

在《我们是如何将 Cordova 应用嵌入到 React Native 中》 一文中,我们简单地介绍了『React Native 重写 Cordova 插件:复杂插件的调用』步骤:

  1. WebView 调用 RN 方法,并监听 React Native 返回的相应事件
  2. React Native 接收到 WebView 的调用,调用原生代码,并监听原生代码返回的相应事件
  3. 原生代码执行 React Native 调用的方法,并响应事件给 React Native
  4. React Native 接收到原生代码的值,执行 injectJavaScript 注入代码到 WebView 里并执行
  5. 注入的 JavaScript 执行代码,并发出相应的广播
  6. WebView 调用的地方,接收到广播,执行相应的方法

上面的 4 和 5 可以是:

4.React Native 接收到原生代码的值,并返回给原生代码 5.接收到相应的值,并发出相应的广播

本文则详细讨论一下这个过程。

步骤1:WebView 调用 RN 方法,并监听 React Native 返回的相应事件

这里,我们和《React Native + Cordova WebView 演进:Plugin 篇》中一样,仍然以 DatePicker 为例。

首先,我们需要一个广播:当 React Native 返回值时,我们就发出一个广播,这样可以解耦合代码。下面的代码则监听相应的广播:

$rootScope.$on('Bridge.datePicker', function(event, data) {
// 更新时间
});

然后便是相应的 datePicker 的调用:

function datePicker(options) {
  function handler(event) {
    event.target.removeEventListener('message', handler);
    var data = JSON.parse(event.data);
    $rootScope.$broadcast('Bridge.datePicker', data);
  }
  window.document.addEventListener('message', handler);

  window.postMessage(JSON.stringify({
    action: 'DATE_PICKER',
    payload: payload
  }));
}

先监听从 React Native 发过来的内容,当接收到内容将数据以广播的形式发出。然后,再通过 PostMessage 告诉 React Naitve,我们需要在调用哪个 action,并传递相应的参数。

步骤2:React Native 接收到 WebView 的调用,调用原生代码,并监听原生代码返回的相应事件

在 WebView 的 onMessage 方法里,我们需要处理不同的 action:

onMessage = (evt, webView) => {
  const event = JSON.parse(evt.nativeEvent.data);
  const action = event.action;
  const payload = event.payload
  ...
  switch (action) {
    case 'DATE_PICKER': {
      return DatePickerHandler.showDatePicker(payload, webView);
    }
  }
  ...
}

然后根据传过来的 action 类型,调用相应的方法,如这里是 DatePickerHandler.showDatePicker,其 Android 部分代码如下所示:

  const { action, year, month, day } = await DatePickerAndroid.open(options);
  if (action !== DatePickerAndroid.dismissedAction) {
    webView.postMessage(JSON.stringify({
      type: 'DATE_PICKER',
      success: true,
      date,
    }));
  }

iOS 则有一些不同,iOS 没有非标签的组件,需要自己写。而且,由于 iOS 的 DatePicker 是异步的,因此我们需要通过事件的方式进行。如下是写完插件后的调用示例:

const RNNoTagDatepicker = NativeModules.RNNoTagDatepicker;

const DatePickerEvent = new NativeEventEmitter(NativeModules.RNNoTagDatepicker);

...

const showPicker = async (options) => {
  RNNoTagDatepicker.show(options);
};

步骤3:原生代码执行 React Native 调用的方法,并响应事件给 React Native

如上,由于 iOS 的日期插件是异步的,并且它只能通过方法,而非组件的方式来唤醒 UI,故而需要 sendEventWithName 来返回值

RCT_EXPORT_METHOD(show:(NSDictionary *) options) {
    dispatch_async(dispatch_get_main_queue(), ^{

    }
}

#pragma mark - Actions
- (IBAction)doneAction:(id)sender {
    dispatch_async(dispatch_get_main_queue(), ^{
        NSTimeInterval seconds = [self.datePicker.date timeIntervalSince1970];
        [self sendEventWithName:@"DATEPICKER_NATIVE_INVOKE" body: @{@"status": @"success", @"value": [NSString stringWithFormat:@"%f", seconds]}];
        [self hide];
    });
}

步骤4:React Native 接收到原生代码的值,并返回给原生代码

在这个例子里,由于在 WebView 以广播的方式解绑,因此可以直接返回值:

DatePickerEvent.addListener('DATEPICKER_NATIVE_INVOKE', (evt: Event) => {
  ...
  webView.postMessage(JSON.stringify({
    type: 'DATE_PICKER',
    success: true,
    date
  }));
  ...
});

如果是要不断地发送数据,则需要在 RN 代码里执行:

let js = 'var event = new CustomEvent("' + action + '", {detail: ' + JSON.stringify(detail) + '});';
js += 'window.document.dispatchEvent(event);';
webView.injectJavaScript(js);

步骤5:接收到相应的值,并发出相应的广播

紧接着,就回到步骤一中的 handler:

  function handler(event) {
    event.target.removeEventListener('message', handler);
    var data = JSON.parse(event.data);
    $rootScope.$broadcast('Bridge.datePicker', data);
  }

步骤6:6. WebView 调用的地方,接收到广播,执行相应的方法

最后,我们终于到了:

$rootScope.$on('Bridge.datePicker', function(event, data) {
// 更新时间
});

如此复杂的过程,也是。。。

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《前端架构:从入门到微前端》

《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容:

  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构。
  • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构。
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签