深入理解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 相关文章推荐
js bind 函数 使用闭包保存执行上下文
Dec 26 Javascript
jquery中$.post()方法的简单实例
Feb 04 Javascript
javascript正则匹配汉字、数字、字母、下划线
Apr 10 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
javascript中html字符串转化为jquery dom对象的方法
Aug 27 Javascript
JS简单限制textarea内输入字符数量的方法
Oct 14 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
Angular.js中$apply()和$digest()的深入理解
Oct 13 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 Javascript
JS简单实现动态添加HTML标记的方法示例
Apr 08 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 Javascript
详解JavaScript中的坐标和距离
May 27 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
生成静态页面的php函数,php爱好者站推荐
2007/03/19 PHP
PHP jQuery表单,带验证具体实现方法
2014/02/15 PHP
Android App中DrawerLayout抽屉效果的菜单编写实例
2016/03/21 PHP
php 在字符串指定位置插入新字符的简单实现
2016/06/28 PHP
PHP实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
PHP实现QQ登录的开原理和实现过程
2018/02/04 PHP
一个js实现的所谓的滑动门
2007/05/23 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
2012/05/23 Javascript
js原型链原理看图说明
2012/07/07 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
Python操作mongodb数据库的方法详解
2018/12/08 Python
对python 自定义协议的方法详解
2019/02/13 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能
2019/07/04 Python
python中for循环把字符串或者字典添加到列表的方法
2019/07/20 Python
使用pip安装python库的多种方式
2019/07/31 Python
pycharm运行scrapy过程图解
2019/11/22 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
关于tf.nn.dynamic_rnn返回值详解
2020/01/20 Python
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
存储过程的优缺点是什么
2015/01/10 面试题
建筑安全标语
2014/06/07 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
vue @ ~ 相对路径 路径别名设置方式
2022/06/05 Vue.js