ReactNative之基于引用共享组件开发实践

黄磊 卢方伟 肖伟

摘    要：React原生组件机制，并提出基于ReactNative跨平台组件开发规范的，将组件映射到相同的原生引用对象，实现同地址的组件的共享。

关键词：共享组件;ReactNatve;状态管理;混合开发;组件引用;跨平台

引言

随着移动互联网的快速发展，尤其是智能手机设备硬件的更新换代，用户的体验和层次的鱼龙混杂，让手机端开发者和平台大大增加了开发成本。实现同样的功能，因此保证开发成本和体验的一致性变成了一个核心点，本文着重讲述基于ReactNative跨平台基础上，解决多个组件之间的内存共享问题，从根本上提升App体验。

一 RN介绍

React Native（以下简称RN）是由Facebook公司2015年推出的开源的跨平台移动应用开发框架，可以实现基于JS开发应用，并可同时运行于IOS端和安卓端两大主流的手机操作系统，真正实现了一次编码，多平台运行，RN最终编译成的是一个真正的移动应用。RN所使用的基础UI组件和原生是完全一致，JS在其中的作用就是跟原生UI关联起来，从而生产出整个App的业务逻辑。

二 组件原理

RN框架主要分三层，原生层、通信层、业务层，原生层主要提供了UI渲染器控制器以及一些其他的基础功能库，均被封装成RN模块、注册、桥等。通信层主要执行原生与JS的通信工作。业务层主要实现的是跟业务相关的组件和工具库使用，通过JS编写的虚拟Dom来构建模块和组件，虚拟Dom是内存中的一种轻量级表现形式，可以通过不同的渲染引擎生成具有一致性的UI。并且借助React的状态管理特性，对原生UI的属性和逻辑进行更新。

三 组件共享原理

RN组件分为JS组件和原生组件，普通的RN组件并没有存在组件共享问题，但由于RN的组件的状态管理都有UI控制器控制器管理，原生的布局控制已經完全被接管，所以原则上是不能通过原生方法去改变组件的布局，所有的逻辑都要在JS端完成。目前开放的所有RN组件并没有提供真正的Native共享功能，现有的开发者开源的共享组件方案也并非是真实组件共享，只是基于同一个虚拟Dom的原生组件复制，映射到内存地址是完全不同的两个Native对象，并非真正意义上的同一个对象，也可以说是同引用（内存中同一地址）。

四 共享组件实现

在RN框架基础上，遵循RN的组件开发规范，我们将创建一个原生组件，这个原生组件既是源组件也是镜像组件。这个组件具有两个特殊属性源标记和目标标记，在触发共享时这两个标记要必须相同，它们是共享的一个桥梁。在Native端有一个临时的存储对象，当触发共享时，源组件对象会被临时存储到存储中，当镜像组件开始渲染时会将源组件对象从存储中取出，并且放置到镜像组件中作为子组件。虽然作为镜像组件的子组件，它的状态管理却不能被镜像组件所接管，它还是由源组件所控制，所以要通过镜像组件的状态管理通过JS再传给源组件，源组件去动态更改源组件对象的状态和尺寸。

我们将创建3个原生类文件，分别是模块管理、组件管理器、原生组件，两个JS的React原生组件（源组件和镜像组件），模块管理主要负责扩展RN组件或者模块的控制管理，组件管理是对Native和JS端的属性、方法、通信、事件等统一管理，原生组件则是基于RN组件的原生View。模块管理主要用于RN扩展库管理，组件管理器会创建真实的View实例，组件类主要用于组件的实体UI部分，其中会处理原生组件的具体功能，包含组件对象挂起以及放置。JS端当源组件设置源的时候，即将源组件的视图置为挂起状态，原生组件则体现为将View临时存储到存储中。当镜像组件尺寸需要发生变化时，能够同步尺寸给源组件，然后通过源的控制器去控制View的尺寸变化。

五 组件使用

基于RN的三方视频组件并不能很好的支持全屏，或者说不能自定义全屏，在自定义播放器UI后，全屏模式并不能展示我自定义的UI组件，例如控制进度条、弹幕、分享、评论等。再如WebView早期的版本并没有全屏的支持，IOS本身目前版本也没有支持，利用共享组件就可以创建一个全屏镜像组件，就将WebView共享为全屏状态。而且在镜像组件中我们可以处理屏幕旋转，以及组件位置的更换。

源组件实现代码部分，点击挂起源组件，在执行挂起操作的同时生成一个唯一的源，可将这个唯一的源携带到任何一个组件作为源。当镜像组件渲染时源组件的View就会自动将源组件的View添加作为子View展示出来，当镜像组件释放时会触发Native共享组件的释放，同时会将镜像原生组件的子View重新恢复到源组件中，这样就同步了RN的生命周期。

六 结论

RN现在是最火的跨平台框架之一，但是还是有很多未解决的问题。这就是这篇文章的价值所在。以上就是基于引用的共享组件实现过程，我们已经将这个共享组件实际应用于项目中。基于引用的共享组件简单但是不平凡，它的作用大大的超过了代码量本身，它是沧海一粟但是却是众多组件的一个亮点。

参考文献：

[1]焦锋.react native在app开发中的应用研究[J].数字技术与应用，2017（06）：109.

[2]严新巧.基于移动开发现状探讨React Native[J].电脑知识与技术，2016，12（32）：76-77+82.

[3]周雪.现代跨平台开发技术在移动终端层面的应用.现代工业经济和信息化，2019，9（1）：73-74.

[4]赵林静.跨平台移动应用开发的优势与不足.信息与电脑，2018（9）：123-124.

[5]张龙，张晗.跨平台响应式前端框架技术的研究与应用.电子设计工程，2018，26（22）：6-9.

[6]王欣，曲萍.移动互联网混合开发技术的方向.科技资讯，2018，16（1）：8-8.