React Native移动开发实战 第2版

全栈开发

React Native移动开发实战（第2版）

向治洪　著

人民邮电出版社

北京

图书在版编目（CIP）数据

React Native移动开发实战 / 向治洪著. --2版. --北京：人民邮电出版社，2020.5

ISBN　978-7-115-53462-0

Ⅰ.①R…　Ⅱ.①向…　Ⅲ.①移动终端-应用程序-程序设计　Ⅳ.①TN929.53

中国版本图书馆CIP数据核字（2020）第031518号

定价：69.00元

读者服务热线：(010)81055410　印装质量热线：(010)81055316

反盗版热线：(010)81055315

广告经营许可证：京东工商广登字20170147号

内容提要

本书全面详尽地介绍了React Native框架的方方面面。本书共分为12章，包括背景知识、入门基础、基础语法、技术详解、组件详解、API、开发进阶、网络与通信、服务器开发基础、测试、应用发布与热更新和电影购票App开发实战等。通过学习本书，读者将会对React Native框架有一个全面的认识，并掌握一定的实战能力。

本书适合具有一定Android和iOS原生开发基础的一线App开发工程师、大中专院校相关专业师生以及培训班学员学习，可用于夯实基础，提升React Native开发实战技能。

前言

经过10余年的快速发展，移动互联网已经取代PC互联网成为互联网发展的主要方向。正所谓“得移动端者得天下”，移动端已成为互联网最大的流量分发入口，面对广阔的市场，网络运营商、互联网企业和设备生产商等产业巨头纷纷扎堆移动互联网，并构筑属于自己的移动互联网生态体系。

随着移动互联网的快速发展，移动互联网技术也变得越来越成熟，开发者也更加关注如何更高效、更低成本地开发移动应用。传统的原生开发技术虽然比较成熟，但由于受开发效率和成本的限制，已经越来越无法满足移动互联网应用的发展需求，所以移动跨平台技术成为移动互联网行业发展的迫切需求。

目前，比较流行的移动跨平台技术主要有两种：一种是基于Web浏览器的Hybrid技术方案，采用此种方案时只需要使用HTML及JavaScript进行开发，然后使用浏览器加载即可完成应用的跨平台；另一种则是通过在不同平台上运行某种语言的虚拟机来实现应用跨平台，此种方案也是移动跨平台技术的主流方案，主要技术有Flutter、React Native和Weex。

作为目前较为流行的跨平台技术方案之一，React Native是Facebook技术团队于2015年4月开源的一套移动跨平台开发框架，可以同时支持iOS和Android两大移动平台。经过4年多的发展，React Native已经成为移动跨平台开发的主流方案之一，并被大量应用在移动产品的开发中。

React Native抛弃了传统的浏览器加载的思路，转而采用曲线调用原生API的思路来实现渲染界面，从而获得媲美原生应用的体验。同时，React Native提出的“Learn Once，Write Anywhere”也赢得了大多数开发者的青睐。

当然，React Native也并不是没有缺点，比较明显的缺点有首次加载慢、调试不友好等，不过这些问题都可以通过社区得到很好的解决。并且，官方正在对React Native进行大规模的重构和优化，相信在不久的将来，React Native会更加完善。

“路漫漫其修远兮，吾将上下而求索”，通过React Native跨平台技术的学习和本书的写作，我深刻地意识到学无止境的含义。大约3年前，我出版了本书的第1版，如今本书与时俱进，理论和实战都更强，并且书中的内容根据新的知识体系进行了升级。相信本书定会对你学习React Native带来帮助和启发。

如何阅读本书

本书共分为12章，涵盖了React Native应用开发的方方面面，希望本书的讲解对你学习React Native有所帮助和启发。本书包含的章节内容如下。

React Native入门与基础（第1章～第6章）

这部分内容主要包含React Native简介、React Native环境搭建、React Native基础知识、React基础知识以及React Native开发常用的组件和API介绍。同时，这部分内容还配备了大量的实例讲解，通过学习本部分知识，读者将会对React Native技术有一个基本的认识。

React Native进阶（第7章～第11章）

这部分内容主要由React Native组件生命周期、组件通信、网络通信、服务器基础知识、TypeScript开发以及应用打包发布与热更新等组成，介绍React Native开发中的进阶知识。这部分内容更加偏向于应用的开发与实战，是开发React Native应用必备的技能。

React Native实战（第12章）

这部分内容是React Native项目实战，是对React Native基础知识的综合运用，是一个综合的示例。通过学习实战部分，读者将会对React Native框架有一个全面的认识。

适合人群

这是一本React Native实战与进阶的书，基于React Native 0.60.0版本编写，适合前端开发者和移动Android/iOS开发者。因此，不管是一线App开发工程师，还是有志于从事App开发的前端开发者，都可以通过本书获取移动跨平台开发的技能。

第1章 React Native背景知识

1.1 React Native的诞生与发展

自从“大前端”的概念被提出以来，移动端和前端的边界变得越来越模糊，并且，近年来流行的移动跨平台技术也让前端和移动端开发人员的职责范围变得越来越模糊。从多年前流行的PhoneGap、inoic等混合开发技术，到现在火热的React Native、Weex和Flutter等跨平台技术，无不体现着移动端开发的前端化。

作为目前流行的跨平台技术框架之一，React Native是Facebook技术团队于2015年4月在早先的React前端框架基础上开源的一套移动跨平台开发框架，可以同时支持iOS和Android两大移动平台。

截至2019年6月，React Native在GitHub网站上已获得大量开发者的支持，如图1-1所示。

说到React Native，就不得不说一下它的诞生过程。早期，Facebook曾致力于推动HTML 5移动端应用的开发，但最终无法实现媲美原生App的用户体验，并且设备性能越差，体验差距越明显。最终，Facebook放弃了HTML 5方案，转而开始使用React Native框架来开发移动端应用。

在React框架的基础上，React Native框架前台的JavaScript代码通过调用封装的Android和iOS原生平台的代码来实现界面的渲染操作，因而调用原生代码的App的性能远远优于使用HTML 5开发的App性能。

由于React Native使用React前端语法来开发移动Android和iOS跨平台应用，因此，对于熟悉React框架的前端开发者来说，不需要再系统学习Android和iOS的特定语法即可开发出媲美原生体验的移动应用。

同时，React Native使用流行的JSX语法来替代常规的JavaScript语法，提高了代码的可阅读性。JSX是一种XML和JavaScript结合的扩展语法，因此对于熟悉Web前端开发的技术人员来说，只需很少的学习就可以上手移动应用开发。

React Native框架的优势在于，只需要使用一套代码就可以覆盖多个移动平台，真正做到“Learn Once，Write Anywhere”。React Native框架底层使用的是JavaScriptCore引擎，基本上只需要更新一下JavaScript文件，即可完成整个App的更新操作，非常适合用来开发App的热更新功能。

除此之外，React Native框架提供的开发和调试环境也是非常友好的，如图1-2所示。尚在开发的App在模拟器或真机中运行时，开发者只需要像刷新浏览器一样，就可以即时查看到代码修改后的效果，并且还可以在Chrome浏览器中查看控制台输出、加断点、单步调试，等等，整个过程完全就是JavaScript开发调试的体验，非常畅快。

1.2 移动跨平台技术横评

1.2.1 阿里巴巴Weex

Weex是由阿里巴巴技术团队研发的一套移动跨平台技术框架，初衷是解决移动开发过程中的频繁发版和多端研发难题。使用Weex提供的跨平台技术，开发者可以很方便地使用Web技术来构建高性能、可扩展的原生级别的性能体验，并支持在Android、iOS、YunOS和Web等多平台上部署。

作为一个前端跨平台技术框架，Weex建立了一套源码转换以及原生端与JavaScript通信的机制。Weex框架表面上是一个前端客户端框架，但实际上它串联起了从本地开发、云端部署到资源分发的整个链路。

具体来说，在开发阶段编写一个.we文件，然后使用Weex提供的weex-toolkit转换工具将.we文件转换为JS bundle，并将生成的JS bundle上传部署到云端，最后通过网络请求或预下发的方式加载至用户的移动客户端应用中。同时，集成了Weex SDK的客户端接收到JS bundle文件后，调用本地的JavaScript引擎执行环境执行相应的JS bundle，并将执行过程中产生的各种命令发送到原生端进行界面渲染，整个工作流程如图1-3所示。

如图1-3所示，Weex框架中最核心的部分就是JavaScript Runtime。当需要执行渲染操作时：在iOS环境下，使用基于JavaScriptCore内核的iOS系统提供的JSContext；在Android环境下使用基于JavaScriptCore内核的JavaScript引擎。

当JS bundle从服务器下载完成之后，Weex的Android、iOS和HTML 5会运行相应的JavaScript引擎来执行JS bundle，同时向终端的渲染层发送渲染指令，并调用客户端的渲染引擎进行视图渲染、事件绑定和处理用户交互等操作。

由于Android、iOS和HTML 5等终端最终使用的是原生的渲染引擎，也就是说使用同一套代码在不同终端上展示的样式是相同的，并且Weex最终使用原生组件来渲染视图，所以在体验上要比传统的WebView方案好很多。

尽管Weex已经提供了开发者所需要的常用组件和模块，但面对丰富多样的移动应用研发需求，这些常用基础组件还是远远不能满足开发的需要，因此Weex提供了灵活自由的扩展能力，开发者可以根据自身的情况开发自定义组件和模块，从而丰富Weex生态。

1.2.2 谷歌Flutter

Flutter是谷歌技术团队开源的移动跨平台技术框架，其历史最早可以追溯到2015年的Sky项目。该项目可以同时运行在Android、iOS和fuchsia等包含Dart虚拟机的平台上，并且性能无限接近原生。React Native和Weex使用JavaScript作为编程语言，使用平台自身引擎渲染界面，而Flutter直接选择2D绘图引擎库Skia来渲染界面。

如图1-4所示，Flutter框架主要由Framework层和Engine层组成，基于Framework开发的App最终会运行在Engine层上。其中，Engine是Flutter提供的独立虚拟机，正是由于它的存在，Flutter程序才能运行在不同的平台上，实现跨平台运行。

与React Native和Weex使用原生控件渲染界面不同，Flutter使用Engine来绘制Widget（部件），即Flutter显示的单元，并且Dart代码会通过AOT编译为平台的原生代码，进而与平台直接通信，不需要JavaScript引擎的桥接，也不需要原生平台的Dalvik虚拟机，如图1-5所示。

同时，Flutter的Widget采用现代响应式框架构建，而Widget是不可变的，仅支持一帧，并且每一帧上的内容不能直接更新，需要通过Widget的状态来间接更新。在Flutter中，无状态和有状态Widget的核心特性是相同的，Flutter会重新构建视图的每一帧，通过State对象，Flutter就可以跨帧存储状态数据并恢复它。

总体来说，Flutter是目前跨平台开发中较好的方案，它利用一套代码即可生成Android和iOS两种平台的应用，很大程度上减少了App的开发和维护成本。同时，Dart语言强大的性能表现和丰富的特性，也使得跨平台开发变得更加便利。而不足之处在于，Flutter的许多功能目前还不是特别完善，全新的Dart语言也带来了学习上的成本。Flutter如果想要完全替代原生Android和iOS开发，还有比较长的路要走。

1.2.3 谷歌PWA

PWA，全称Progressive Web App，是谷歌技术团队在2015年发布的渐进式Web开发技术。PWA结合了一系列的现代Web技术，使用多种技术来增强Web App的功能，最终可以让Web应用呈现出媲美原生应用的体验。

相比于传统的Web技术，渐进式Web技术是可以横跨Web技术及原生App开发的技术解决方案，可靠、快速且可参与。

具体来说，当用户从主屏幕启动应用时，不用考虑网络的状态就可以立刻加载出PWA，并且PWA由于具有Service Worker 等先进技术的加持，加载速度是非常快的。除此之外，PWA还可以添加在用户设备的主屏幕上，不用从应用商店进行下载即可通过网络应用程序Manifest file提供类似于App的使用体验。

作为一种全新Web技术方案，PWA的正常工作需要一些重要的技术组件，它们协同工作并为传统的Web应用程序注入活力，如图1-6所示。

其中，Service Worker表示离线缓存文件，其本质是Web应用程序与浏览器之间的代理服务器，可以在网络可用时作为浏览器和网络间的代理，也可以在离线或者网络极差的环境下使用离线的缓冲文件。

Manifest则是W3C的技术规范，它定义了基于JSON的清单，为开发人员提供一个放置与Web应用程序关联的元数据的集中地点。Manifest是PWA开发中的重要一环，它为开发人员控制应用程序提供了可能。

目前，渐进式Web应用还处于起步阶段，应用者也是诸如Twitter、淘宝、微博等大平台技术团队。不过，PWA作为谷歌技术团队主推的一项技术标准，Edge、Safari和FireFox等主流浏览器也都开始支持渐进式Web应用。相信PWA在未来的Web技术栈中会开辟属于自己的一片天地。

1.2.4 对比与分析

在当前诸多的跨平台方案中，React Native、Weex和Flutter无疑是优秀的。而从不同的维度来看，三大跨平台框架又有各自的优点和缺点，如表1-1所示。

如上表所示，React Native、Weex采用的技术方案大体相同，它们都使用JavaScript作为编程语言，然后通过中间层转换为原生组件，再利用原生渲染引擎执行渲染操作。Flutter直接使用Skia来渲染视图，并且Flutter Widget使用现代响应式框架来构建，和平台没有直接的关系。就目前跨平台技术来看，JavaScript在跨平台开发中的应用可谓占据了半壁江山，大有“一统天下”的趋势。

从性能方面来说，Flutter的性能理论是更好的，React Native和Weex次之，并且都好于传统的WebView方案。但从目前的实际应用来看，它们之间并没有太大的差距，性能体验上的差异并不明显。

从社群和社区来看，React Native和Flutter无疑更活跃，React Native经过多年发展已经成长为跨平台开发的实际领导者，并拥有丰富的第三方库和开发群体。Flutter作为最近才火起来的跨平台技术方案，还处在快速更新测试阶段，商用案例也很少。不过谷歌技术的号召力一直都很强，未来究竟如何发展让我们拭目以待。

1.3 本章小结

传统的原生Android、iOS开发面临着诸多困难，例如开发周期长、迭代缓慢等，很多公司因此倍感困扰。所幸，近年来兴起的跨平台开发技术为这些问题找到了新的解决方法，借助这些优秀的跨平台开发框架，在不牺牲性能和体验的前提下，人们有效地解决了开发中的难题。

目前，移动跨平台开发作为移动开发的重要组成部分，是移动开发者必须掌握的技能。在移动互联网领域，主流的移动跨平台技术主要有React Native、Weex、Flutter和PWA等，本书即将全面介绍React Native的相关知识和实践经验。