React Native在汽车人App上的应用与实践

总篇88篇 2020年 第12篇

1、背景

“汽车人”App是汽车之家自主研发的一款移动办公应用。已经经历了多年的版本更新迭代，从最初的0.X系列到现在的4.1.X， 从原生开发到现在的跨平台， 平台 应用有 70+个，目前在线的应用覆盖了日常绝大多数的移动办公场景。

汽车人 A pp 最初采用原生的开发方式， Android和 i OS同时上线一个功能时，两端都要实现一遍，耗时耗力。和大多数原生应用一样，无法 应 对业务快速变化，在没有热修复或热更新的前提下，通过原生发新版让用户 频繁升级 极度影响用户体验。因此这种纯原生开发模式无法满足之家业务快速变化的需求。

我们调研了 市面上 很多 成熟的跨平台框架， 包括 最早出现的以 Cordova为首的Hybird混合开发技术 ，如， PhoneGap，Ionic，AppCan，uni-app等 ，同时我们也调研了 Facebook   推出的 React Native 框架 。 通过综合对比，我们认为 React Native 框架模式应该是未来移动开发的趋势。

2 、 React Native 介绍

Facebook 分别 于 2015年3月 和 9月 发布 React Native for I O S和 React Native for Android ， 号称 “learn once，write anywhere”（仅需学习一次， 可以 编写任何平台） ，一套代码能运行于双平台上，并且拥有以上 Hybrid框架所有特性以及Native的优秀性能，让越来越多的公司开始关注和使用起这个框架。 React Native 版本在不断升级，目前已经到了 0. 61.X 系列

以下是 React Native的框架原理图，

React Native技术抛开了WebView，利用JavaScript Core来做JSBridge桥接，将JS调用转为native调用。虽在渲染时需要通过Native领域的OEM widgets这个桥梁，会牺牲掉一部分性能，但这部分性能却能获取到跨平台开发，这是值得的，也是一大进步。

React Native采用的Flexbox布局比Native的自适应布局更加简单高效，本人亲身体验过两者的界面编写方式，虽然界面布局都很费时间，但React Native的编写效率确实比Native还要快一些，除去平台适配不说，JSX语法文件一般写一遍就 可 以同时在 Android和 i OS两个平台运行。

React Native 使用 Java S cript 作为开发语言，并且采用了 React 的一些开发技术，如相同的组件生命周期， F lex 布局等，使开发者可以获得和 R eact完全一致的开发体验。React是Facebook的一个成熟的前端开发框架，它 可以说 拥有前端开发的半壁江山 。 它和 Google的Angular在流行的前端框架中 排名靠前，具 有几乎相同级别的用户数 。

另外，还有一个重点 功能 ，它 可以 实现 热 更新，可以在后台发布版本更新功能，而不用让用户频繁升级版本；

当然， 客观的说 React Native也存在一些问题，自身bug较多，一些问题不仅不可靠，而且难以追踪；官方与第三方库并不全部支持安卓与iOS平台 等 。 另外， 一些新的跨平台技术和框架也正在兴起，如 Google的Flutter（在2017年的谷歌I/O大会上，Google推出了Flutter，在2018年发布了Flutter的第一个Beta版本），它虽然借鉴 学习 了 React Native的一些理念，但大有“青出于蓝而胜于蓝”的势头。但不论怎样，它却不失为一款很好的跨平台开发框架，当下在性价比方面它还是一个不错的选择。

3 、 React Native 在 汽车人 App 上的应用

汽车人 App目前的系统架构如下所示：

汽车人主要以 React Native来开发 上层业务， 所以上图也是围绕 React Native来整理的一个架构图。汽车人本身也有一些纯原生的应用，但比重不是很大，而且后续也是以React Native为主。

整体上，这个架构图分成了两大部分：汽车人应用和移动平台。移动平台大家应该都了解，主要由 Android或iOS的框架和硬件组成，它是汽车人应用能够 赖以生存 的软硬件环境。

汽车人应用我 们 分成了五个部分： Android/iOS Native层，桥接层，React Native组件/API层，React Native应用层，H5应用部分。其中React Native和原生之间通过JavaScript Core进行桥接的，它和H5中的JavaScript与WebView的桥接不是一个概念，所以这里做了 区分 。另外，汽车人的基础组件库 autobots-commonlib也是一个承接React Native和原生之间的桥梁，所以把它放到了桥接层。

下面分别对这五个部分进行介绍：

Android/iOS Native层

这一层是 Android/iOS 原生部分，包括原生应用 、 原生提供给 React Native的底层组件/API 、 React Native运行的承载页 和 用于运行 H5的原生WebView都在这一层。

• 汽车人中的原生应用

汽车人中的原生应用很多正在向 React Native+原生模式转型。例如人脸打卡，在汽车人的首页里面可以直接启动人脸打卡功能，不过现在为了方便动态更新，越来越多的业务被剥离出来放到了React Native层面， 涉及复杂业务，动画，高性能要求部分我们都已组件的方式对 React   Native提供能力 。这样做的好处是一些业务可以在中间页中进行开发，方便及时的动态更新，也节省了开发时间，因为 React Native的界面写一遍是可以同时适配Android和iOS的。因此现在大部分的原生应用基本都扩展成了React Native+原生方式 来 存在。 比如我们的 VPN，智能日历，人脸采集等都是React Native+原生混合的模式 ，属于完全纯原生的应用很少了。

• Android/iOS的原生以及自定义组件和API

Android/iOS的原生组件和API 是整个React Native框架的底层和基础。 比如， React Native中官方定义的最常见的Image组件，在iOS上，就是用原生的UIImageView来封装的，在Android上则使用ImageView控件来 实现 的。

除了官方定义的组件和 API，汽车人里也开发了很多自定义的组件与API。例如，能够进行单选/多选的选人控件，使用原生方法将其进行了封装，然后通过桥接方法callNative（Android上为ReactNative.NativeModules.RNModule.callNative，iOS为AppLoader.callNative）以及汽车人自定义协议“autobots://testrn/callSinglePersonSelect” 来 触发 调用。 这些组件都是用原生方法和控件开发的。

• 汽车人中自定义的API

自定义的 API很多，例如getAppVersion，用来 获取 系统的平台类型，如 “Android”或“IOS”，以及汽车人版本号 等信息。 因为是自定义的组件或 API，所以通过汽车人的自定义协议以及JavaScript桥，可以 很容易 提供给 React Native来使用。

• React Native的承载页

React Native的界面如果需要运行起来，首先 得 有一个根视图，在 Android上叫ReactRootView，在iOS上叫RCTRootView，这个根视图用来作为React Native界面Native容器，React Native上所有UI相关的的内容都运行在这个容器中。而这个视图或容器需要依附在Native具体的界面上才能运行，这个界面就是React Native的承载页。在Android上是封装的一个Activity--NewFaceBookReactNativeActivity，而在iOS上是封装的一个UIViewController--RNViewController。视图载体页扮演着一个很重要的角色，它是所有React Native业务的统一载体。在汽车人里面，虽然有各种各样的业务，如列表页，详情页，编辑页等不同形态的各种业务，但在Native层只有一个统一的载体页。这样的好处是便于管理，并且方便通过热更新平台将 JS 代码更新到本地进行安装，运行。

• 原生WebView和其承载页

对于 H5应用，汽车人中基本都是用自定义的原生WebView来进行展示的，并且也有一个独立的承载页，这个承载页也是分别用封装的Activity/UIViewController来实现的。用原生的WebView来展示H5有点类似于Hybird开发模式，这种模式可以通过原生定义的Java S cript桥，实现H5与原生的消息交互，这样在H5中借助Java S cript代码可以使用原生的功能了。

在原生的 H5承载页中定义了很多桥接口，通过它给H5提供了大量丰富可调用的原生功能。比如，获取设备网络状态，重新登录，切换横竖屏，获取认证信息，获取登录身份，分享，获取地址等等

以上就是 Android/iOS Native层的一个概要介绍。一些功能还 是用到了 原生来开发的，但 绝大部分 业务 相关应用都是用 React Native来实现 。 原生组件和 API 是整个React Native框架的基础，所有React Native上层组件都要依赖于它们。承载页可以说是一个大容器，用它来展示React Native或H5界面。

桥接层

桥接层用来连接 React Native和原生， 并且用于 实现两者之间的通信。原生代码与 React Native（或JavaScript）代码是通过桥接层进行交互 的 ，这是一个异步的处理过程。桥接层介于 JavaScript代码和原生之间，正如它的名称一样，它的作用很像桥（bridge）。用户的输入、发起的网络请求和响应，UI组件的展示等事件都注册在原生代码中。React Native在原生层收集React Native端发送过来的事件产生的数据，异步处理后通过桥接层再回传给JavaScript层。JavaScript层在拿到原生回传的数据后处理并生成一系列自己能够识别的指令，同样经过处理后再传回原生层。桥接层的原生端决定哪个原生模块对应React Native的那个组件， 哪 个指令对应 哪 个 API，这些都是提前注册好的，同时在需要的情况下来更新UI。

汽车人的基础组件库 autobots-commonlib实现了汽车人自定义的一些基础组件和API，它严格来说是一个React Native的库，如果把它放到React Native组件/API层也是合适的，之所以把它放到桥接层，是因为其利用汽车人自定义的autobots协议，以及 R eact Native提供的callNative方法来实现的，它起到了一个自定义React Native组件（API）和原生组件（API） 之间 的桥接作用。通过桥接 方法 可以触发原生的代码逻辑，从而实现和原生的打通。

React Native组件/API层

在这一层，除了官方定义的组件，我们还封装了很多自定义组件。 React Native 提供的组件有 Image、ListView、FlatList、Picker、Text、TextInput、ScrollView 等，更多的可以从 React Native 官方网站：https://reactnative.dev/docs/getting-started.html 上查询到。我们扩展的组件除了上面 autobots-commonlib提到的那些外，还有二维码扫描、拍照、date-picker、area-picker、Tab-View、modal、语音识别、自定义Toast等很多自定义组件。

除了组件，还有 API。官方提供的 API 有 ClipBoard、AsyncStorage、AppRegistry、Alert 、Animated、AppState、Dimensions等，更多功能的API 也 可从官方网站上查询。我们扩展的 API有：钉钉分享、微信分享、支付宝支付、微信支付、员工信息、获取版本号、检测升级、打开vpn、断开vpn、获取动态口令等等。

汽车人基于 react-native正在开发具有汽车人自己风格的组件库，可以通过小程序示例浏览这些示例组件，里面提供了很多丰富且便捷的UI控件和调用方法。未来将逐步使用它统一汽车人的UI风格，方便且规范各个业务方开发调用。

React Native应用层

• React Native 应用

React Native应用层也可称为React Native的业务层或JS业务层，主要专注于业务或应用功能的实现，包括视图的 选择 、组件的布局、 UI样式的设定、网络接口的调用，业务数据和逻辑功能的处理等。React Native业务层在整个框架中处于最顶层，是所有React Native应用对外呈现的落地实施。

汽车人中现在有 3 种应用， 1是原生应用，2是H5应用，3是React Native的应用。 另外，我们基于 React   Native打造了我们自己的小程序平台，类似微信小程序对外提供移动开发能力，支持之家内部其他业务线进行注册，编码，发布更新小程序的能力，当然这些需要借助小程序发布平台，后面会详细说明。在展示方面它有一 个类似 “微信小程序”式的导航栏，界面如下 所示 ，

通过 React Native的自定义方法，可以对返回键图片，颜色（它是一个矢量图），标题文字，大小，菜单颜色，图片，关闭图片的颜色，图片等进行自定义设置。

目前汽车人上的应用绝大部分都是通过小程序平台发布， 如经常接触到的首页、流程中心、 OKR（任务管理）、会议室预定、请假申请、差旅、办公用品、常用信息、家家内购、考勤记录等 达到 40+个。

• 热更新

React Native应用都支持热更新，汽车人并没有使用市面上较成熟的两个方案，一是微软的 Code Push，另一个是React Native中文网中的react-native-pushy，而是像一些企业一样开发了一套自己的热更新方案。主要原因是这两个方案都是将整个App的所有JSBundle文件打包进行更新，而不能区分业务。这样导致如果一个业务的JSBundle 有问题，就得更新整个包含所有业务的JSBundle文件，不仅费时还费资源，耦合 也 太严重，不适合单个业务的独立更新。

热更新平台是 React Native应用版本发布和bug静默修复 的 保障。热更新平台的主要功能是将 React Native业务层及其引用的代码编译链接成JSBundle文件，并上传给后台，汽车人统一的React Native加载页在启动时将对应业务的JSBundle文件下载到手机外部或内部存储器中，并加载到Native App内存中，再通过React Native的加载页 （ Android上的ReactRootView和iOS上的RCTRootView ） 来解析和加载对应的 JS业务界面和逻辑。在此过程中，需要 先 做 下 检测 ，判断 当前是否是最新版本，以及 是否有 加载失败等情况的处理。

热更新平台涉及 JSBundle的资源管理系统和数据接口系统。开发人员在本地工程通过一个自定义的autoer发布命令可以将本地的JS代码进行打包并上传到资源管理系统。其中autoer负责将相关JS 业务层代码编译并link成JSBundle 文件（汽车人中在android 上叫做index.android.bundle，在iOS上叫做main.jsbundle，不同平台JSBundle文件 名作了 下区分，这个可以自定义）。当原生 Native通过 JSBundle数据接口系统提供的接口请求数据时，数据接口系统将从数据缓存中查询数据，并将对应业务的JSBundle文件返回给Native端。Native端为了提高用户体验，避免加载时间过长，会对JSBundle文件进行缓存，用户访问相关页面时，先展示缓存中的内容，再访问接口。通过接口返回的版本号与本地版本进行比对，只有新版本时才去进行更新。

• 小程序和小程序发布平台

之前有提到现在汽车人中有 4类应用，分别为原生，H 5 ， React  Native 应用和小程序，小程序本质和 React  Native 应用可以归结为一类。但小程序有别于 React  Native 应用，它的最大特性就是对外开放性。

随着公司业务的不断扩展，很多部门希望将自己的产品或业务移动化，而苦于没有这样的平台，不得不求助于汽车人移动团队来帮其实现，而移动团队人员有限，并且自身也承担着大量的业务和需求开发，没有太多资源帮所有部门解决这些问题，所以双方都很为难。而小程序和小程序发布平台解决了这个痛点。用户只要有一些前端的开发经验，会 Ja v aScript 语言，熟悉一下 React   Native的开发环境就可以很快上手。如果遇到问题，可以根据汽车人提供的小程序示例程序，帮助文档，以及汽车人开发人员的支持可以很快解决。

同时小程序发布平台也提供了便捷的发布和调试环境。包括小程序正式 /测试环境发布、权限配置、灰度测试、小程序正式/测试环境的调试、小程序日志管理、开发者管理等开放工具，使开发者可以轻松，快捷的将编写的小程序在汽车人上进行调试和发布。

小程序发布平台如下图所示，

通过小程序和小程序发布平台，解决了其他部门没有移动平台发布自己移动业务应用的痛点，同时，随着越来越多小程序在汽车人 A pp 上的发布，汽车人 App正在从一个单纯的跨平台应用向一个移动平台转变。可以预见，在不久的将来它将会承担更多的责任，公司的办公业务移动化也将迈向一个新的台阶。

4 、总结和展望

以上是 基于 React Native 在 汽车人 App 上应用与实践的大致介绍。 React   Native框架使我们的应用做到了跨平台开发，能够同时在Android和 i OS平台上运行，有接近于原生的流畅度和操作体验，并能支持自定义的热更新功能，它满足了我们现阶段的开发要求。

随着业务的 进一步扩 展和新功能的加入，后续 基于 React   Native技术 的结构还会不断的调整 和加强 。 伴随 React Native版本的更新和稳定，我们也尝试升级到更高版本来获取官方提供的更多特性和功能。官方也在重构React   Native的底层和框架，我相信等正式1 .0 版本发布后，它将会拥有更多的创新，更好的稳定性，也会带给汽车人 App更多的惊喜，我们期待那一天的到来。