深入理解React Native原生模块与JS模块通信的几种方式


Posted in Javascript onJuly 24, 2017

每种语言都有自己的设计理念、语法、运行环境,这也导致了不同语言间相互交流通信时必须要有中介来翻译,如JAVA与C/C++通过JNI来交流、OC与C/C++需要在.mm文件混编、而JAVA/OC与Lua通信时需要通过C/C++语言来做中介。那么在React-Native中JSX是如何与底层模块进行通信的呢?这里主要以iOS系统来做说明。

原理

通信本质上是信息的交流,具体到计算机语言则是数据的流动。应用中数据在React-Native与原生模块间的流动与共享,完成了与用户的交互,达成了应用的目标。React-Native与OC间通信的数据只能是下面的几种类型(前为JS类型,后为OC类型):

  1. string-NSString
  2. number - int/NSInteger/float/double/NSNumber
  3. boolean - BOOL/NSNumber
  4. array - NSArray
  5. object - NSDictionary(NSString型key, value可以为这里的其它类型)
  6. func - RCTResponseSenderBlock

其它类型的数据需要通过一定的规则转换成这几种类型后(一般都会转换成JSON串)再通信.

React-Native本质是通过JavaScriptCore.framework实现JS代码与OC代码间的互动。因此下面说的几种方式在本质原理上都是相同的,不同的地方只是在于实现形式与方法的差别。

函数调用

在将原生模块封装并提供给React-Native使用时,可以通过RCT_EXPORT_METHOD()宏向React-Native侧定义其可以调用的接口函数,完成两模块间的通信。

//定义了startVPN接口,React-Native将VPN的具体参数通过该接口传入到原生模块,开启指定的VPN
RCT_EXPORT_METHOD(startVPN:(NSDictionary*)config)
{
 LSShadowSocksDataMode* mode = [[LSShadowSocksDataMode alloc] initWithDictionary:config];
 [self.manager startVPN:mode];
}

除了传入数据外,通过可以通过这种方式从原生侧获取数据。最容易想到的是通过返回值获取,可惜的是RCT_EXPORT_METHOD宏不支持返回值,不过其提供了另外一种实现返回值的方式:

RCT_EXPORT_METHOD(isOpen:(RCTResponseSenderBlock)callback)
{
 BOOL open = [self.manager status];
 callback(@[[NSNull null], @[@(open)]]);
}

通过回调函数的形式实现返回值的效果,达到了数据交换的目的。

属性共享

这种方式主要针对于UI控件来说的。React-Native中最基础的UI类型是RCTRootView,该类有一个初始化方法initWithBridge:moduleName:initialProperties:,第三个参数initialProperties表示的是UI控件的初始属性值,类型为NSDictionary,其最终会被同步到由第二个参数定义的React-Native类的props中,即完成了两个模块间的数据交流。

NSArray *imageList = @[@"http://foo.com/bar1.png",
     @"http://foo.com/bar2.png"];

NSDictionary *props = @{@"images" : imageList};

RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
          moduleName:@"ImageBrowserApp"
          initialProperties:props];
import React, { Component } from 'react';
import {
 AppRegistry,
 View,
 Image,
} from 'react-native';

class ImageBrowserApp extends Component {
 renderImage(imgURI) {
 return (
  <Image source={{uri: imgURI}} />
 );
 }
 render() {
 return (
  <View>
  {this.props.images.map(this.renderImage)}
  </View>
 );
 }
}

AppRegistry.registerComponent('ImageBrowserApp', () => ImageBrowserApp);

初始化接口只能在UI组件建立时使用,如果需要在UI组件的生命周期内通信呢,RCTRootView提供了appProperties这样一种机制:

NSArray *imageList = @[@"http://foo.com/bar3.png",
     @"http://foo.com/bar4.png"];
rootView.appProperties = @{@"images" : imageList};

通知

OC中使用NSNotificationCenter向整个应用发送通知,所有对该通知感兴趣的对象都会获得该通知并执行相应的动作。

React-Native中也提供有类似的机制:RCTEventEmitter。原生模块继承该类后,就可以向React-Native侧发送通知,而React-Native就能够接收到该通知,并处理一并传送过来的数据了。

-(void)vpnStatusChanged:(NSNotification*)notification
{
 NEVPNStatus status = [self.manager status];
 NSString* value = nil;
 switch (status) {
 case NEVPNStatusReasserting:
  value = @"重新连接中";
  break;
 case NEVPNStatusConnecting:
  value = @"连接中";
  break;
 case NEVPNStatusConnected:
  value = @"已连接";
  break;
 case NEVPNStatusDisconnecting:
  value = @"断开连接中";
  break;
 case NEVPNStatusDisconnected:
 case NEVPNStatusInvalid:
  value = @"末连接";
  break;
 default:
  break;
   }
 if(value){
 [self sendEventWithName:@"VpnStatus" body:@{@"status":value}];
 }
}

这里将VPN的状态通过通知发送到React-Native侧,由React-Native将VPN的状态显示的UI界面上。

小结

这里只是简单的介绍了两种语言间几种常用的通信方式,并没有涉及到其背后的实现细节。对这方面感兴趣的同学,不妨参阅下面的两篇文章:

React Native通信机制详解

浅析ReactNative之通信机制

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery中的查找parents与closest方法之间的区别
Dec 02 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
May 17 Javascript
jQuery基础知识点总结(DOM操作)
Jun 01 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
深入理解jquery中extend的实现
Dec 22 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
May 08 Javascript
Ionic3 UI组件之autocomplete详解
Jun 08 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
对Vue beforeRouteEnter 的next执行时机详解
Aug 25 Javascript
如何在Vue.js中实现标签页组件详解
Jan 02 Javascript
vue实现的树形结构加多选框示例
Feb 02 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
Aug 31 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
Jul 24 #Javascript
vue.js移动端app实战1:初始配置详解
Jul 24 #Javascript
React 子组件向父组件传值的方法
Jul 24 #Javascript
浅谈Node.js ORM框架Sequlize之表间关系
Jul 24 #Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
Jul 24 #Javascript
jQuery实现拼图小游戏(实例讲解)
Jul 24 #jQuery
php register_shutdown_function函数详解
Jul 23 #Javascript
You might like
apache配置虚拟主机的方法详解
2013/06/17 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
一个原生的用户等级的进度条
2010/07/03 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
jQuery读取和设定KindEditor值的方法
2013/11/22 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
AngularJS实现元素显示和隐藏的几个案例
2015/12/09 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
全面理解闭包机制
2016/07/11 Javascript
JS判断日期格式是否合法的简单实例
2016/07/11 Javascript
layui导航栏实现代码
2017/05/19 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
2021/01/12 Vue.js
python判断字符串是否纯数字的方法
2014/11/19 Python
python机器学习理论与实战(一)K近邻法
2021/01/28 Python
python学生信息管理系统(完整版)
2020/04/05 Python
python实现QQ批量登录功能
2019/06/19 Python
python tkinter实现屏保程序
2019/07/30 Python
Python列表操作方法详解
2020/02/09 Python
印尼最大的在线购物网站:MatahariMall.com
2016/08/26 全球购物
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
馥蕾诗美国官网:Fresh美国
2019/10/09 全球购物
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
技校毕业生的自我评价
2013/12/27 职场文书
初中同学聚会邀请函
2014/02/03 职场文书
聚美优品的广告词
2014/03/14 职场文书
毕业设计说明书
2014/05/07 职场文书
教师演讲稿大全
2014/05/16 职场文书
小学生表扬稿范文
2015/05/05 职场文书
使用python创建股票的时间序列可视化分析
2022/03/03 Python