首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何在 React Native 实现类微信小程序平台:WebView 调用原生组件

如何在 React Native 实现类微信小程序平台:WebView 调用原生组件

作者头像
Phodal
发布2018-01-29 14:11:46
3.3K0
发布2018-01-29 14:11:46
举报
文章被收录于专栏:phodalphodal

在《我们是如何将 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:WebView 调用的地方,接收到广播,执行相应的方法

最后,我们终于到了:

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

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

好了,就差一个小程序框架了:

如何创建一个兼容「微信小程序」的Web框架:WIN

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2017-09-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 phodal 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 步骤1:WebView 调用 RN 方法,并监听 React Native 返回的相应事件
  • 步骤2:React Native 接收到 WebView 的调用,调用原生代码,并监听原生代码返回的相应事件
  • 步骤3:原生代码执行 React Native 调用的方法,并响应事件给 React Native
  • 步骤4:React Native 接收到原生代码的值,并返回给原生代码
  • 步骤5:接收到相应的值,并发出相应的广播
  • 步骤6:WebView 调用的地方,接收到广播,执行相应的方法
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档