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

新书《全栈应用开发:精益实践》

这不是一本深入前端、后台、运维、设计、分析等各个领域的书籍。本书以实践的方式,将这一系列的领域及理论知识结合到一起,来帮助读者构建全栈Web 开发的知识体系,并辅以精益及敏捷的思想,来一步步开发Web 应用:从创建一个UI 原型到编写出静态的前端页面;从静态的前端页面到带后台的应用,并部署应用;从Web 后台开发API 到开发移动Web 应用。在这个过程中,我们还将介绍一些相辅相成的步骤:使用构建系统来加速Web 应用的开发;为应用添加数据分析工具来改进产品;使用分析工具来改善应用的性能;通过自动化部署来加快上线流程;从而帮助读者开发出一个真正可用的全栈 Web 应用。同时,我们也将帮助读者把这些步骤应用到现有的系统上,改进现有系统的开发流程。

comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

InfoQ社区编辑,CSDN前端博客专家

毕业于西安文理学院电子信息工程专业

长期活跃于开源软件社区 GitHub,专注于物联网和前端领域。

著有《自己动手设计物联网》(电子工业出版社)、曾作为技术专家审阅英国 Packt 出版社的物联网书籍《Learning IoT》、《Smart IoT》等书。

在 GitHub 开源有《Growth:全栈增长工程师指南》等六本电子书,并译有《物联网实战指南》。

联系我: h@phodal.com

标签

最近的一些事