ReactNative移动开发实战

前言

随着手机和移动互联网技术的日益成熟，移动应用的领域也从如何开发，发展到如何更高效、更低成本地开发。传统的原生平台（iOS、Android）开发技术虽然比较成熟，但由于开发效率和成本的限制，已经越来越无法满足移动互联网应用的开发需求。

所以，具有简单、迅速、跨平台的优势，而且基于 Web 开发语言和布局技术的 React Native 得以迅速流行，并一举夺得跨平台开发技术的头筹。

目前市场上大多数 React Native 书籍主要以翻译和讲解官方文档为主，并未从开发实际应用出发，通过典型案例来指导读者提高开发水平。本书以实战为主旨，通过完整的电商类 App 项目实例，来介绍 React Native 中常用的组件、API、布局、第三方组件和原生接口，让读者全面、深入、透彻地理解 React Native 主流的开发和设计方法，提升实际开发水平和项目实战能力。

本书涉及的概念较多，下面给出一个技术点云图，希望读者有所了解。

本书特色

1. 每一步都有详细的源码和实例参考

为了便于读者理解本书内容，提高学习效率，本书的所有内容都有详细的源码和实例参考。对于这些源码和实例，作者均亲自编写和验证，杜绝复制、粘贴代码以敷衍读者的不负责任行为。本书源码可以在 https∶/coding.net/u/learnreactnative/p/learmreactnative-sourcecode/ git 里下载。

2.内容涵盖React Native开发的各个方面

本书涵盖 React Native 组件、API、布局、第三方组件以及原生接口等 React Native 应用开发的各个方面，尽量保证不出现知识"死角"。凡是涉及的一些技术（如原生、瀑布流、耦合性和 JSON），也给出了概念或原理的解释。

3.结合工具助力更高效的React Native开发

在本书"实战"讲解的过程中，详细介绍了 React Native 开发工具 Nuclide 的使用、 React Native 命令行工具的用法及各种调试工具（包括布局、断点及实时加载等）的使用，不仅教读者如何开发，还教读者如何更高效地开发。

4.项目案例典型，实战性强，有较高的应用价值

本书以开发一个电商类应用为例，涵盖了React Native 应用开发中会用到的所有重点知识，设计和源码做到拿来可用，方便应用开发者随时查阅和参考。

5. 收获的不仅仅是React Native平台和编码

对于一些学习能力较强的读者，完全可以在 React Native 开发文档的帮助下快速学习和掌握 React Native。而本书希望读者在掌握平台和编码之外，还能够了解实际应用开发过程中涉及的软件开发流程、应用架构设计、代码重构技巧，以及原生平台与其他跨平台开发的相关知识，让读者融会贯通地理解应用开发技术。

本书内容及知识体系

第1篇 React Native入门和基础（第1～2章）

本篇介绍了跨平台开发的主流方案和 React Native 基础知识，主要包括开发环境搭建、React Native 命令行工具和 React Native 布局调试。

第2篇 React Native应用开发实战（第3～7章）

本篇介绍了React Native 实际应用开发中常用的技术，主要包括基本组件、使用第三方组件、搭建基于Node.is 的服务器为应用绑定真实数据、fetch API、AsyncStorage/SQLite/ Realm 数据库存储、更多 React Native 组件和 API 的用法、原生平台接口开发等。

第3篇 React Native混合编程（第8~10章）

本篇主要总结和回顾了前7 章所开发的电商类应用的技术和架构，主要包括应用的文件结构、Flexbox 的整体布局、应用的逻辑结构、应用的通信过程及进一步改进的地方和思路，其中就包括了redux 开发框架。

第4篇 App的发布和更新（第11～12章）

本篇主要介绍了React Native 应用打包和发布的全过程，配以详细的截图说明，并且对 React Native 应用发布后的热更新实现和方案 CodePush 做了详细的示例说明。

适合阅读本书的读者

●React Native 学习人员;●iOS 平台应用开发工程师;● Android 平台应用开发工程师;●Web 前端开发工程师;●Node.js 服务端开发工程师;●计算机相关专业的学生;●专业培训机构的学员;●软件开发项目经理。

第 1章 为什么要学习 React Native

无论读者是移动平台开发者，还是 Web 前端开发者，想必对现在"大红大紫"的 React Native 都有所耳闻。那么，除了"乘着 Facebook 这棵大树好乘凉"的优势之外，React Native到底是何方"神圣"，有什么令大家"趋之若鹜"的优点呢?下面带着这样的好奇，来随本书一探究竟吧!

本章主要内容有∶

● React Native 与 React.js 的对比。

●为什么说 React Native 是跨平台的。

● React Native 应用的结构。

● React Native 的特点。

● React Native 的环境搭建。

●创建第一个 React Native 应用。

1.1 看透 React Native

React Native 第一次进入公众的视野是在 2015年1 月的 React.js Conf上，随后，同年5月份，Facebook在F8 Conference上正式宣布∶ React Native 项目（如图 1.1 所示）在React Native

Github 开源。结果一天之内，就收获了 5000 多颗星，受关注程度

图 1.1 React Native Logo可见一斑!

△小知识∶React.js Conf是指 Facebook的 React开发者大会，F8 Conference是指 Facebook的开发者大会，Github 是全球最大的软件项目托管平台，也被戏称为"人类的代码仓库".

1.1.1 React Native 与 React.js

想必读者在还没弄清React Native之前，又发现了一个"新朋友"Reactjs（下文简称 React），那到底什么是 React 呢? 它和 React Native 又是什么关系呢?

先来看看 Facebook 官方对 React 的定义∶React is a Javascript library for bullding user interfaces 从上述官方的定义可以知道∶React 是一个用于前端 UI开发的 JavaScript 库。和其他类似的前端框架相比，例如，老牌的 Backbone（http∶/backbonejs.org/）、Google 推出的 Angular和以轻量级著称的 Vue.js（http//en.vuejs.org/），React 最大的不同是提出了Virtual DOM（即虚拟 DOM）的设计，可以大大提升页面渲染的效率。 .小知识∶ 移动平台开发很好理解，即移动平台上（例如 Apple 的 iOS 平台，Google 的Android平台）的软件开发，开发语言和技术主要有 Objective C、Swift及 Java等。而前端开发是相对于后端（又称服务器端）开发而言的，前端主要负责开发通过浏览器和用户交互的部分，开发语言和技术主要有 HTML、CSS 及 JavaSeript 等。

但是，Facebook 不仅仅满足于 React 对前端开发技术的革新，又将 React 的设计移植到原生开发中，从而诞生了React＋ Native 结合的产物，即React Native。

虽然，React Native 刚开始只支持iOS App 开发，但是从2015 年9月起，React Native也支持Android App 开发，而且随着微软、三星等"IT大佬"的加入，React Native 还将支持更多的移动平台，例如，Sansung 的 Tizen 平台（https∶//www.tizen.org/）、Microsoft 的 Window Phone (htp://microsoft.github.io/code-push/articles/ReactNativeWindows.html)。

所以，简单来说∶

●React Native 和 React 使用了相同的开发语言 JavaScript 和相同的设计理念 React。●React Native 和 React 运行的环境和平台却是完全不同的，React Native 是基于移动平台（如 iOS、Android 等），而 React 是基于浏览器。

2提示∶国内网络环境下访问 React Native 官网可能较慢，读者可以访问国内的中文资源网站，例如 React Native 中文网，或者自行搜索加快 React Native 官网访问速度的办法。

1.1.2 React Native 的跨平台

简单了解了React Native 的由来之后，读者或许会有这样的疑问，开发移动平台 App使用原生开发平台和语言就好了，为什么要出现使用 React Native 来开发移动平台 App 的技术呢?换句话说，React Native 到底可以解决什么问题呢?

在进一步讨论之前，笔者觉得有必要明确一下什么是原生应用和跨平台应用。

1.原生应用

所谓的原生应用是指;使用原生开发语言、工具和平台开发的应用。原生应用开发的优势在于拥有较高的平台成熟度，包括平台的稳定性、运行时的性能及完善的生态。 A小知识; 所谓的"生态"应该算是比较抽象的概念，开发平台的生态圈包含了很多方面，从硬件上芯片和各种电子元器件的生产、供应，到软件上所使用的语言、开发工具及第三方开源库的数量质量，以及人的方面，如开发者的数量、水平等因素。

【下载地址】

链接：https://pan.baidu.com/s/1OQLzpc6HQbTUSSjo_SmdYw

提取码：9txr