1、 React Native 跨平台移动应用开发 阙喜涛 编著 内 容 简 介 React Native 是 Facebook 公司最新推出的，强大的、开源的跨平台移动应用开发框架，它能大幅减少跨平台移动应用开发的工作量，并且代码结构清晰、简单易懂。同时 React Native 框架采用模块化结构，使应用版本的更新迭代非常简单。随着它的日趋成熟，React Native 必然会成为移动应用开发的主流技术。本书由浅入深、系统地介绍了使用 React Native 框架跨平台开发所需要用到的知识。本书每一章都专注于阐述某一方面的知识，配合若干个原创的、精小的例程，能让读者系统、快速地掌握该方面知识
2、。本书是按照有基本的编程基础知识，刚学习 JavaScript 基本语法的读者最佳学习路径来编写的。有一定基础的开发人员也可以将本书作为 React Native 开发的“字典”来使用，在开发时可以快速查找相关知识点的细节。希望通过本书，能将最新的 React Native 开发技术介绍给国内广大开发者，让国内移动应用开发进入一个新的时代，让开发者用比较少的精力就能高效、美观地完成移动应用开发。未经许可，不得以任何方式复制或抄袭本书之部分或全部内容。版权所有，侵权必究。图书在版编目（CIP）数据 React Native 跨平台移动应用开发/阙喜涛编著.北京：电子工业出版社，2016.6 IS
3、BN 978-7-121-28707-7 .R.阙.移动终端应用程序程序设计.TN929.53 中国版本图书馆 CIP 数据核字（2016）第 094122 号 策划编辑：孙学瑛 责任编辑：葛 娜 印 刷：装 订：出版发行：电子工业出版社 北京市海淀区万寿路 173 信箱 邮编：100036 开 本：7871092 1/16 印张：22.75 字数：596 千字 版 次：2016 年 6 月第 1 版 印 次：2016 年 6 月第 1 次印刷 定 价：79.00 元 凡所购买电子工业出版社图书有缺损问题，请向购买书店调换。若书店售缺，请与本社发行部联系，联系及邮购电话：（010）882548
4、88，88258888 质量投诉请发邮件至 ，盗版侵权举报请发邮件至 。本书咨询联系方式：010-51260888-819 。前 言 我对移动应用开发大势的粗浅理解 我必须向大家坦白：我现在是个没有良心的人。因为写这本书不仅把我的良心用完了，还透支了很多。本书所有的示例代码都是原创，并且在代码旁有注释解说，绝没有扔一大段代码给读者自己慢慢看的情况。仔细想来，所有主流手机平台应用开发我都涉足过，它们是 J2ME、Symbian、Series 60 开发平台、Windows Mobile、Android、iOS、Windows Phone。许多年前我写过一本 Series 60 平台移动应用开发的
5、书。当我写到一大半时，Symbian 手机操作系统、Nokia 手机、Series 60 开发平台这片森林从地球表面消失了 如果问这么多年我对移动应用开发最深的感触是什么，那就是移动应用开发太特么的难了！难就难在应用需要能运行在不同的手机上。开发者的代码要适配不同的手机操作系统（这意味着要使用不同的编程语言编写）、不同的手机硬件能力（比如开发者的应用需要使用 GPS 定位，然后发现某型号手机没有 GPS 定位功能）、不同的手机屏幕分辨率（想象一下当开发者发现应用程序在另一种屏幕分辨率下显示得乱七八糟时的惊喜）。随着科技的发展，手机开发也在向好的方向不停地转变。Android 与 iOS 两大手
6、机操作系统称霸江湖（这种稳定对开发者是一件好事儿，相互竞争也让两大操作系统都在不断地提升完善）。手机硬件配置越来越强大，能力越来越强大，价格越来越平易近人。手机现在已经成为了普通老百姓无时无刻不随身携带的电脑。伴随着这种趋势，市场对移动应用开发的需求也越来越多，并且要求越来越高。这么多年来，移动应用开发者做梦都希望有一个能跨平台的开发工具，让他们不要把同一个移动应用使用不同的开发语言写两遍（或者三四遍）。但跨平台开发工具的实现很难，很多先驱者倒在了这条路上。直到 Facebook 给大家带来了 React Native。让我以一个预言结束我的唠叨吧。在西方传说故事里那些没良心的巫师的预言忒准了
7、，所以请读者对我的预言稍微有些信心。嗯，我的水晶球呢？啊，在这里。（装模作样好长一段时间）预言：我看到了一个新的伏地魔正在崛起，他会统治这个世界，他那高高的巫师帽上 React NativeReact Native 跨平台移动应用开发 IV 这个名字不时地散发着邪恶的光芒！写作本书的目的 React Native 项目代码是开源的，项目代码中的例程也是开源的，项目文档也是在网上公开的，所有人都可以非常方便地获取浏览。但目前 React Native 的文档假设它的读者有相当深厚的开发方面的知识与经验，并且有 React.js 开发基础。也就是说，React Native 的公开文档对初学者并不
8、是非常友好的。React Native 项目中的例程代码对初学者而言同样有些高深。在各个 React Native 论坛上，React Native 的文档不够好是大家的共识。笔者非常努力地把这本书写好，让它从简入深，通俗易懂。本书绝对不是粗制滥造、简单翻译的书籍。书中讲述的知识点结构、例程设计都倾注了笔者大量的心血，与网上公开文档的差别非常大。本书对读者最大的价值是：把读者通过阅读网上公开文档、项目例程学习 RN 开发技术所需要的 800 小时左右的时间（视个人基础有所不同）缩短为 300 小时左右。本书中的 6.5 节、第 11 章、14.5 节都是笔者精心整理调研出来的技术，在官方文档中
9、没有提及，希望能让更多的开发者享受到 React Native 开发的便利性。希望通过本书，能将 React Native 开发技术介绍给国内广大开发者，让国内移动应用开发进入一个新的时代，让开发者用比较少的精力就能高效、美观地完成移动应用开发。读者对象 本书的读者对象如下：Android 平台移动应用研发工程师 iOS 平台移动应用研发工程师 JavaScript 软件研发工程师 计算机相关专业的学生 如何阅读本书 React、React.js、React Native 对于初学者常见的困惑是弄不清 React、React.js、React Native 三者之间的关系。这是情有可原的。初学
10、者经常发现在很多讨论 React Native 技术的资料中，怎么突然说到 React.js 上去了？过一会儿怎么又好像说到 React 基础框架上去了？因此在讨论如何阅读本书之前，有必要先说明一下这三者的关系。React 是基础框架，是一套基础设计实现理念，开发者不能直接使用它来开发移动应用或者网页。在它之上发展出了 React.js 框架用来开发网页，发展出来 React Native 用来开发移动应用。因为 React 基础框架与 React.js 框架是同时出现、同时进化发展的，这就造成了 React基础框架的基本概念、设计思想都是在 React.js 的相关文档中描述的。后来，Fac
11、ebook 推出 React 前 言 V Native 后，也没有把 React 的相关概念文档从 React.js 文档中分离出来。这就导致出现了学 React Native 要去看 React.js 文档，说 React Native 不时会说到 React.js 的情况。如果开发者只想关注移动应用开发，那么在 React.js 的如何开发网页的文档中整理出来 React 基础框架知识是个不轻松的活儿。现在，本书推出了，有了这本书，读者可以不用再去看 React.js 文档了。预备知识 学习 React Native 开发需要基础的 JavaScript 编程知识。我估计有一部分读者可以在
12、某个手机平台使用该平台原生语言进行移动应用开发，但对 JavaScript 只是有所耳闻。如果是这种情况，不用担心。读者只需要随便找一本 JavaScript 入门级的书籍（甚至是网上的教学性网页），阅读关于基础语法的章节，花上一天时间（包括找资料的时间）学习相关知识点，接下来就可以通过本书学习 React Native 开发了。所需要的知识点有：（1）JavaScript 语法。包括语句、注释、变量、数据类型、数组（注意关联数组，Java、C+的数组中没有这个概念）、对象的基本知识。（2）操作运算符。这个与 Java、C+基本上是一样的，读者快速过一下就行了。（3）条件语句、循环语句、swi
13、tch 语句。这个与 Java、C+基本上是一样的，读者快速过一下就行了。（4）函数。JavaScript 中函数也是一种变量，知道了这一点，其他与 Java、C+基本上是一样的，读者快速过一下就行了。（5）对象。JavaScript 的对象定义、实现比 Java、C+宽松很多，读者得稍微适应一下。这些基本的知识点，大多与 Java 或者 Objective-C 的相关知识点很类似。如果读者有基础，阅读这些知识点最多只需要一天的时间（半天看完也不是难事儿）。读者不需要搭建 JavaScript 的开发环境来练习、巩固这些知识点。因为在 React Native 的开发环境中编写代码就可以练习这
14、些基本的 JavaScript 知识点，在 React Native 学习中就会巩固这些 JavaScript 基本知识。React Native 在开发中用到了其他 JavaScript 的高级知识点与 ES 6 的一些新特性。但读者不需要马上去学习这些内容。在通过本书学习 React Native 开发过程中需要使用到的 JavaScript 高级知识点时，会指出在附录 A 的什么位置讲解了这些高级知识点，便于读者快速查看。附录 A 不是JavaScript 知识点的全面讲解，只是让读者对 React Native 开发中需要使用到的 JavaScript 知识点的理解足够进行 React
15、 Native 开发。相关下载地址 笔者希望读者在阅读本书时，能在理解的基础上将例程代码输入到电脑中。输入的过程是一个消化吸收的过程。输入完成后，运行代码，并且按照提示或者针对自己有疑虑的地方进行修改，以便深入理解各个知识点。正因为如此，本书前面章节中那些短小精悍的例程并没有附在一张光盘上，或者在网上提供React Native 跨平台移动应用开发 VI 下载地址，而是需要读者自己手动输入电脑。本书还有一些不需要读者手动输入的代码，笔者在 GitHub 上提供了一个网址供读者自行下载。网址是：https:/ 本书讨论的 React Native开发特性覆盖了 2016 年 3 月 2 日发布的
16、 React Native 0.21.0 版本的绝大部分特性。没有讨论的部分在书末有提及。首先需要说明的是，本书讨论的知识以跨平台（Android 平台与 iOS 平台）开发为主，书中各章节的绝大部分知识点都是跨平台实现的。只有极小部分是分平台实现的，这一小部分在讨论前都会说明该部分知识适用于哪个平台。本书的结构是按一个有基本的编程基础知识，刚学习 JavaScript 基本语法的读者最佳学习路径来编写的。通过一个个精简的例程，阐述清楚一个个基本思想。例程尽可能地精简，并且所有例程都是笔者花了大量时间为初学者构思而成的。本书体例说明 代码与代码说明 本书例程中有大量的代码说明，通过注释的方式与代码同时展示出来。例如：var IncomingCall=React.createClass(watcher:null,/用来记录监视器用来记录监视器 startFromLeft:true,/用来判断用户最先按下的是最左侧还是最右侧用来判断用户最先按下的是最左侧还是最右侧 moveNeedhandle:false,/用来判断监测到的移动事件是否需要处理用来判断监测到的移动事件是否需要处理 注释以黑