ReactNative跨平台移动应用开发（高清PDF 下载）

前 言

我对移动应用开发大势的粗浅理解

我必须向大家照白∶我现在是个没有良心的人。因为写这本书不仅把我的良心用完了，还透支了很多。本书所有的示例代码都是原创，并且在代码旁有注释解说，绝没有扔一大段代码给读者自己慢慢看的情况。

仔细想来，所有主流手机平台应用开发我都涉足过，它们是 J2ME、Symbian、Seriss 60 开发平台、Windows Mobile、Android、iOS、Windows Phone。许多年前我写过一本 Series 60平台移动应用开发的书。当我写到一大半时，Symbian 手机操作系统、Nokia 手机、Series 60 开发平台这片森林从地球表面清失了…..

如果问这么多年我对移动应用开发最深的感触是什么，那就是移动应用开发太特么的难了!难就难在应用需要能运行在不同的手机上。开发者的代码要适配不同的手机操作系统（这意味着要使用不同的编程语言编写）、不同的手机硬件能力（比如开发者的应用需要使用GPS定位，然后发现某型号手机没有GPS 定位功能）、不同的手机屏幕分辨率（想象一下当开发者发现应用程序在另一种屏幕分辨率下显示得乱七八糖时的惊喜）。

随着科技的发展，手机开发也在向好的方向不停地转变。Android与iOS 两大手机操作系统称霸江湖（这种稳定对开发者是一件好事儿，相互竞争也让两大操作系统都在不断地提升完善）。手机硬件配置越来越强大，能力越来越强大，价格越来越平易近人。手机现在已经成为了普通老百姓无时无刻不随身携带的电脑。伴随着这种趋势，市场对移动应用开发的需求也越来越多，并且要求越来越高。

这么多年来，移动应用开发者做梦都希望有一个能跨平台的开发工具，让他们不要把同一个移动应用使用不同的开发语言写两遍（或者三四遍）。但跨平台开发工具的实现很难，很多先驱者倒在了这条路上。直到 Facebook 给大家带来了 Rcact Native。

让我以一个预言结束我的劳叨吧。在西方传说故事里那些没良心的巫师的预言忒准了，所以请读者对我的预言稍微有些信心。嗯，我的水晶球呢?啊，在这里。（装模作样好长一段时间）预言∶我看到了一个新的伏地魔正在崛起。他会统治这个世界，他那高高的平师帽上 React Native这个名字不时地散发着邪恶的光芒!

本书结构

本书讨论的 React Native开发特性覆盖了2016年3月2日发布的React Native 0.21.0版本的绝大部分特性。没有讨论的部分在书末有提及。

首先需要说明的是。本书讨论的知识以跨平台（Android 平台与 iOS 平台）开发为主，书中各章节的绝大部分知识点都是跨平台实现的。只有极小部分是分平台实现的，这一小部分在讨论前都会说明该部分知识适用于哪个平台。

本书的结构是按一个有基本的编程基础知识，刚学习 JavaScript 基本语法的读者最佳学习路径来编写的。通过一个个精简的例程，阐述清楚一个个基本思想。例程尽可能地精简，并且所有例程都是笔者花了大量时间为初学者构思而成的。

第1 章 React Native

2015 年3月 26日，Facebook公司对外正式发布了React Native——使用 Reuct 框架跨平台开发原生移动应用的开源技术框架。开发者可以使用React Native 高效地开发运行于Android 与iOS操作系统的应用程序。它的设计理念是∶使用 React Native 开发，既拥有 Native 的良好人机交互体验，又保留了React框架的开发效率。

提示∶在这句话中，Native 是指使用原生开发环境开发的应用程序。Native 的良好人机交互体验是指当用户用手指在屏幕上操作时，被触摸的 UI组件会发生视觉上的变化（比如某项变暗或者高亮、长按时被控的部分出现动函效果、拖动列表到头时的弹回效果、手机的震动效果等）。

相对于类Web 界面的应用程序，Native 的良好人机交互体脸应道具有以下属性∶

反馈/高亮——星示洽同户是什么正在处理他们的触摸，以及当他们择效手势时会发生什么;

抓销的能力——在做一个动作的这程中，用户息该能够在触摸过程中通过移动手指中止该动作。

Native 的良好人机交互体验让用户使用一个应用程序时更舒适，因为它允许用户在体验和交互时不用担心犯错误。

而React 是 Facebook 从 2012 年以来慢慢发展起来的一套开发框架。在这套框架上诞主了Rcastis用来进行屑页开发，以及ReactNative 用来造行子机 APP升发（它们三者的关系在本书前言的"如何阅读本书"中有详细描述，如果你阅读时跳过了前言，强烈建议你现在就去阅读）。使用 Reactjs 开发网页的效率比普通的 HTML 网页编写要高出非常多。它现在也是一项非常热门的网夏开发技术。React Native 的并发效率，读者很快就能体验到。

React 框架不追求所谓的"一次编写，随处运行（Write once，run anywhere.）"。React认为不同的平台应该有不同的外观、感觉、功能等。开发者仍然需要为不同的平台去做一些额外的工作。 Reaxt把不同平台的能力分为跨平台通用能力与平台特色能力，这样应用程序的代码也分成了跨平台部分与平台特色部分。React 把这个方案叫作"一次学习，随处编写（Leam once，write anywhere.）"。

React Native 跨平台移动应用开发

1.1 React Native 开发特点

在 Reuct Native 发布的短短5个月里，就有60多个使用 Reust Native技术开发的APP在苹果软件商店上线。开发者在尝试后对 React Native 赞不绝口。它究竟有哪些优点呢?

1.1.1一次学习，随处编写

在 iOS 与 Android 这两个操作系统上实现统一的开发框架，一份代码支持两个操作系统在历史中已经证明是非常困难的。Rcact Native提出了"Learn once.write anywhere."。使用 React Native可以为这两个操作系统开发应用程序，但不同平台上的代码根据平台会有一些微小区别。但开发思路是相同的。只需要根据平台进行一些代码调整，有经验的开发人员进行这种调整的速度非常快。React Native开发小组没有狂妄地喊出"Write once，run anywhere.".但在UI开发上，React Native差不多已经做到了这一点。

1.1.2 混合开发

混合开发是React Native的另一个重要特性。React Native 允许开发者在 React Native 擅长的领域使用React Native 开发，而在 React Native 不能实现的领域或者已经有原生代码实现好的领域直接使用原生代码。React Native 代码开发的模块与原生代码开发的模块可以双向通信、无缝衔接。这使混合开发变成了件很轻易的事。

很多读者不是很熟悉混合开发这个概念，在这里详细说明一下。

混合开发可以分为3种情况∶

1. UI 界面由 React Native 开发，但 UI事件处理由原生代码来执行

举个简单的例子。在 ReactNative 开发的界面上有让用户输入用户名与密码的 UI控件，还有一个登录按钮。用户点击登录按钮后，React Native 组件将用户输入的用户名与密码传给原生代码编写的登录模块（在 Android上，用Java语言开发;在 iOS上，用Objective-C或者Swift 语言开发），让原生代码执行登录操作。原生代码通过互联网向网络侧的服务器发送登录消息，并等待服务器回应。在服务器回应后，廊生代码再将收到的回应中的登录成功与否，以及其他一些需要 UI 展示的数据传递给 React Native组件，React Native 组件接收原生代码传来的数据，解析这些数据并执行 UI 界面更新，向用户展示相关信息。

2.将原来使用原生代码实现的 UI 小部件包装成 React Native 的自定义组件

Widgst 在移动应用程序开发中被广泛使用，它们有官方发布的，也有第三方开源的。还有开发者自行开发的。React Native 支持将这些 Widget 包装成 React Native 的自定义组件，然后就可以在 React Native 代码中方便地使用了。

3. 应用界面在 React Native 开发的界面与原生代码开发的界面间切换

在某些情况下，我们希望使用原生代码开发的界面，比如某个界而，在原来的版本中已经开发好了，或者希望在已经用原生代码开发好的项目中加入一些用 React Native 开发的新界面。混合开发可以做到让应用界面流畅自如地在这两种界面间切换，用户对此不会有任何感知。

我们可不可以用原生代码来开发 U界面，让 React Native 模块处理 UI事件啡? 理论上是可以的，但很少有人这么干。因为React Native 的强项就是 UI开发，在混合开发中，能用 React Native开发的界面，优先用 React Native 开发。

提到混合开发，不得不提到另一个分支∶ 在手机上使用 WebView 来星现部分 UI 界面。使用 WebView 开发比较灵活，能沿用全部 Web 开发的习惯，比如 Reactjs 的各种好处和 Web 的快速选代流程。但因为所有的渲染都由 Web 相关技术来完成，使用 WebView 无法得到真正原生的用户体验，并且 WebView无法做到与原生代码双向通信、无缝衔接。React Native 不排斥 WebView开发，并且为WebView 提供了相应的组件，可以在 React Native 中掌现部分界而通过 WebView呈现。

1.1.3 高效的 UI 开发

对于移动应用开发来说.在单个平台上，UI部分开发工作量占移动应用开发总工作量的比重至少是 50%。对于追求界面美观、使用方便、容易上手的移动应用来说，这个比例会提高到 70%左右。再考虑到很多应用都需要兼顾Android与iOS 两个平台，UI开发的工作量又被放大了1倍。

在这个时候，使用 React Native 开发的优势就显露无遗了。使用 React Native 开发移动应用的 UI 界面比使用原生语言快捷高效，再考虑到至少 90%的移动应用界面都可以使用 React Native 开发，一份代码适配 Android与iOS 两个平台，这相当于减掉了一个开发平台上至少50%的工作量。开发者找不到任何理由不使用 React Native 开发移动应用。

虽然 React Native 可以实现很多 UI 之外的功能，但开发 UI部分绝对是 React Native 的强项。这体现在 4个方面上。

1.独特的 UI 实现框架

React 重新思考了 UI 开发过程，并且提出了一套全新、高效的框架。复杂 UI 界面开发难点的本质问题是∶ 如何将来自于网络侧与用户侧的动态数据高效、实时、正确地呈现在复杂的用户界面上。Facebook 的 React 框架是这个问题的一个优秀解决方案。React Native 官网描述它的出发点为;用于开发数据不断变化的大型应用程序（Building large applications with data that changes over time）。相比传统型的 UI开发，React 开辟了一个相当另类的途径，实现了 UI 界面的高效率、高性能开发。使用React 开发.开发者永远只需要关心数据。当数据改变时，开发者只需要告诉 React数据变了，由 React来实现 UI界面的改变。本书一进入正题在第2、3 章重点讨论的状态机变量与属性就是这个框架的基石之一。

2. 组件化开发

React推荐以组件的方式去重新思考U构成，将 UI上每一个功能相对独立的模块定义成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体 UI的构建。

React强调将应用划分成多个互不相关的组件，每个组件作为一个独立的视图。这使得开发者中r容易进行致件迭代升级，因为不用在改动某一小部分时把整个系统都植理一遍。最重要的是，React Native 跨平台移动应用开发。

React 包装了复杂而易变的数据到对象的实现，改为提供一个声明式的结构，使得整个程序模型变得抽象而简单。使用 React来构建网页或者手机 UI时，代码变得容易预测。这种可预测性使得开发者在快速地迭代产品时可以更多地信任已有的代码，最终应用程序也变得更为可靠。更进一步的，React 框架不仅仅使扩大应用规模变得更容易，也使团队规模更容易进行调整。

这样开发出来的代码结构清晰、共用性高、可移植性高。上一个项目的某些组件，可以很方便地拿来在下一个项目中使用;在网上看到的好的开源组件，可以下载后很方便地集成在我们的项目中使用。

3. 跨平台移植代码迅速

使用 React Native 进行 UI开发时，开发者通常先在一个操作系统（iOS 或 Android）上开发，然后用这套代码去另一个操作系统中进行修正。通常需要修正的代码只有总代码的 5%甚至更低有经验的开发者会很清楚两个系统有哪些不同，代码中的哪些部分需要修改，快速地实现 React Native 代码对两个操作系统的适配。

4.自动匹配不同屏幕大小的手机

在手机屏幕上布局、显示一个UI组件十分困难，开发者往往不得不自己去计算视图的大小和位置，然后让 UI 组件去适应视图的大小。

使用 React Native 开发，开发者无须为不同的屏幕分辨率准备不同的图片资源或者布局文件，甚至可以不考虑屏幕大小的问题。通过灵活的布局方式，React Native可以做到在不同的手机屏幕上高效、清晰的 UI呈现。 1.1.4 高效的 UI调试

在原生开发过程中，开发者的每一次改动（即使改动的元素非常小，如一个单词，或者一个位置）都需要经历重新编译和构建，然后把安装包上传到手机的过程。这使得开发者在做很多工作时变得非常缓慢，尤其是当一个大工程的编译特别慢时。

使用 React Native 开发，修改了代码后立刻可以在于机上看到效果，没在重新编还启动程序所需要的时间。并且可以打开一个 Chrome 窗口，所有的代码都移到 Chrome 里面运行，断点调试、单步调试、调用栈追踪这些常用的调试方法都可以进行操作。

1.1.5 学习门槛低、开发难度低

看到技术大牛们的巨著都是厚厚的一本，笔者也东施效颦。非常努力地尝试着把这本书写得厚些，但本书还是这么博!从这点读者就应当知道，使用 React Nwive 开发的难度实在很低。下面还是总结一下为什么使用 React Native 开发的难度低。

1.开发语言简单

React Native 使用 ECMAScript 2015（虽然它穿了件很华丽的"马甲"，但我们还是一眼就认出来它就是 JavaScript）语言（也简称为ES6），以及自创的JSX语言（通俗共说，就是在 JavaScript中加入一些标签化的 XML）来进行开发。JavaScript 是一门使用很广泛的语言。相对于目前手机开发人员不足的情况，JavaScript 开发人员却很多。经过简单的学习，没有移动应用程序开发基础的JavaSeript 开发人员就能使用React Native 进行移动应用程序的 UI与部分业务逻辑的开发了。

对于没有 JavaScript 知识背景的手机APP 开发人员，只需要用几天时间鹦悉JavaScript 的基本语法后就可以使用 React Native 进行开发。

JavaScript是一门很特殊的语言，它很简单但也可以非常复杂。React Native 从一开始就注意到了JavaScript的不足之处，要求在 Rcact Native 开发中使用JavaScript的"严格模式"，并且采用更先进的 ECMAScript 2015，能够做到取其精华，去其精粕。

而React Native 使用的 JSX语言也是非常简单的，简单到本书不会有专门的章节去进解它的语法。读者只要一个一个例程从浅入深地学下去，不知不觉间，就已经掌握 JSX 语言了。

【下载地址】

链接：https://pan.baidu.com/s/16udlckicaAWUuDwdb9nYng

提取码：p6o2