React Native开发指南

自2O15年春天Facebook开源React Native以来，React Native就凭借其强大的可扩展性、良好的用户体验以及可拥有原生外观等优势得到开发者的关注和青睐。

本书是一本实践指南，从基础知识入手，逐步深入，带领读者部署可 100%代码复用的、成熟的跨平台移动应用。作者通过示例代码向Web开发者和前端工程师展示了如何使用移动组件构建界面并编写样式，以及如何调试和部署应用。除了框架本身的讲解，作者还探讨了如何使用第三方库，以及如何编写自己的Java或者Objective-C的React Native扩展。

了解React Native如何开放原生UI组件接口类比HTML元素，

了解该框架如何使用原生组件

创建自己的React Native组件和应用，并为它们编写样式为该框架不支持的API和功能安装第三方模块使用工具来调试代码，并解决JavaScript之外的问题

■ 整合所学知识，开发一款高效记忆闪卡应用——Zebreto

部署应用至iOS应用商店和Google Play商店

内 容 提 要

本书通过丰富的示例和详细的讲解，介绍了React Native 这款 JavaScript 框架。在 React Native 中利用现有的 JavaScript 和 React 知识，就可以开发和部署功能完备的、真正原生的移动应用，并同时支持iOS与Android 平台。除了框架本身的概念讲解之外，本书还讨论了如何使用第三方库，以及如何编写自己的Java 或 Objective-C的 React Native 扩展。

本书适合前端工程师或 Web 开发者，以及希望开发跨平台移动应用的其他开发人员。

前言

本书将介绍 React Native，一款由 Facebook公司出品的用来构建移动应用的 kvaScript 框架。在 React Native 中利用现有的 JaaScript 和 React 知识，就可以开发和部署功能齐全的、真正原生的移动应用，并同时支持 iOS 与Android平台。采用 JavaScript 作为开发语言并不意味着需要退而求其次，相反，React Native 在不牺牲原生样式和体验的前提下，相比传统移动开发仍然有很多优势。

我们将从基础开始学习，然后逐步深入，最终部署一款 100% 代码复用的成熟的移动应用到iOS 应用商店和 Google Play 商店。除了框架本身的概念讲解之外，我们还将讨论如何使用第三方库，以及如何编写自己的 Java或 Objective-C的 ReactNative 扩展。

如果你想从前端工程师或 Web 开发者的视角接触移动应用开发，那么本书就是为你量身定做的。React Native是一款令人惊奇的框架，愿你怀着和我一样喜悦的心情来探索它。

预备知识

本书总体上不是介绍React 的，我们假设你对 React 已经有一些了解。如果你从未接触过 React，我建议你在正式开始学习移动开发之前先阅读一两篇相关的教程，尤其应该熟悉 React的属性（props）和状态（state）、组件的生命周期以及如何创建 React组件等知识。同时，我们也会使用一些 ES6 和JSX的语法。如果你对这些还不太熟悉也没有关系，我们将在第 2章讲解 JSX，在附录A 中介绍 ES6的语法。这些语法本质上与你习惯的 lavaScript 代码是一对一的解析关系。

本书假设你使用 OS X操作系统进行开发。开发 iOS 应用必须使用 OS X操作系统。使用 Linux 和 Windows 开发 Android 应用的支持工作仍在进行中。

第1 章 初识React Native

React Native 是一款用来开发真正原生、可渲染iOS和Android移动应用的JavaScript框架。它基于 Facebook 公司开源的JavaScript 用户界面开发框架React而产生，但 React 将浏览器作为渲染平台，而React Native的渲染平台则是移动设备。也就是说，Web 开发者现在就可以使用我们非常熟悉的JIavaScript 类库来开发真正原生的移动应用。并且，由于编写的大部分代码可以在平台之间共享，React Native 可以让你更简单地同步开发 Android和iOS 应用。

与 Web 平台上的 Rcact 相似，React Native 也使用 JSX进行开发，这种编程语言结合了JavaScript 和类 XML标记语言。React Native 在后台通过"桥接" 的方式调用由 Objective-C（iOS平台）或 Java（Android平台）开放的原生渲染接口，因此，你的应用将会使用真正原生的移动 UI组件，而不是传统的 WebView 渲染方式，进而拥有与其他移动应用一样的外观和体验。同时，React Native 也为 JavaScript 开放了平台接口，让你的应用能够使用平台提供的功能，例如摄像头和用户定位等。

React Native 目前同时支持iOS和Android，今后也可能扩展到其他平台上。在本书中，我们将会同时介绍iOS 和Android 的知识，并且书中大部分代码都能跨平台运行。没错，你完全可以用 React Native 来开发用于正式发布的移动应用。据了解，Facebook等公司已在使用它开发面向用户的应用。

1.1 React Native的优点

事实上，React Native 调用宿主平台标准染接口的方式已经使它从其他现有的跨平台应用开发方案（比如 Cordova或 Ionic）中脱颖而出。目前通过编写JavaScript、HTML和 CSS 的方式进行应用开发的方案大多使用 WebView 进行界而渲染，当然这种方案是可行的，但也带来了一些问题，尤其是性能损耗。同时，这种方案通常无法使用宿主平台的原生 UT组件，所以这些框架尝试去模仿原生 UI组件的行为，而模仿的效果通常让人觉得不够真实。为了模仿各种类似动画这样的细节，一般都要付出巨大的努力，然而它们很快又会过时。

相反，React Native 则将你的代码解析成真正原生的 UI 组件，利用了所用平台上现有的视图渲染方式。并且，由于React不在 UI主线程中运行，你的应用可以在不牺牲灵活性的前提下保持高性能。React Native 的生命周期与 React 相同，当属性（props）或状态（state）发生改变时，React Native 会重新渲染视图。而与浏览器上的 React 最大的不同在于，React Native 使用了宿主平台上的 UI元素来代替HTML 和 CSS。

对于习惯了Web 平台的 React 开发者来说，这意味着你可以使用熟悉的工具来开发真正原生的移动应用。在开发者体验与跨平台开发等方面，React Native 较传统的移动端开发来说也有一定的优势。

1.1.1 开发者体验

如果你曾经有过移动端的开发经历，将会对 React Native 的易用性感到震惊。React Native团队已经研发了强大的开发工具并在框架内嵌入了友好的错误提示，因此使用这些强大的工具会让开发体验更加自然。

例如，由于 React Native 使用了 JavaScript，我们查看修改结果时不需要重新编译。相反，按下Command+R就可以刷新应用，就和在网页上开发一样。在传统移动端开发中，编译构建应用所花费的时间会积少成多，相比之下 React Native 的快速迭代就像是天赐之福。 React Native 还可以让你更好地利用智能调试工具以及错误报告机制。如果你习惯于使用 Chrome 或者Safari的开发工具（图 1-1），那么使用它们进行移动开发一定也会让你十分愉悦。同样，你可以选择喜爱的任何文本编辑器来开发 JavaScript;React Native 不强制你使用 Xcode 进行iOS 开发，也不强制使用 Android Studio 进行 Android开发。

除了能逐渐改善开发者体验之外，React Native 也极有可能给你的产品发布周期带来一些积极的影响。例如，Apple 公司允许通过网络对基于JavaScript 开发的功能进行更新，无需额外的审核周期。

所有这些小福利将会节省你和你的伙伴们的时间和精力，让你可以专注于工作中那些更有趣的部分，同时也能提高你的工作效率。

1.1.2 代码复用与知识共享

使用 Rcact Native 可以大大减少开发移动应用所需的资源。任何了解如何编写 React 的开发者现在都可以使用相同的技能同时开发 Web 应用、iOS 应用和 Android 应用。React Native 避免了按平台分工的必要，可以让你的团队更加快速地迭代产品，并更加高效撑共享知识和资源。

除了知识的共享之外，你的大部分代码也可以被共享。当然，不是你写的所有代码都可以做到跨平台;这取决于你需要在特定的平台上实现什么功能，你可能偶尔也需要涉及 Objective-C或 Java的知识（好在这也不是很糟糕，我们将会在第7章讲解本地模块的用法）。使用React Native，在不同平台之间复用代码将会变得出平意料地简单。例如，ReactEurope 2015 大会提到， Facebook Ads Manager 这款 Android 应用共享了其 iOS 版本 87%的代码。另外，我们通过本书完成的一款闪卡应用做到了iOS 和 Android 代码的完全复用。这是很难超越的成就!

1.2 风险和缺点

就像世间万物一样，React Native 也难免存在一些缺点，至于React Native是否适合你的团队，则取决于你们自身的情况。

React Native于2015年3月发布了对iOS 平台的支持，同年9月开始支持Android平台，由于目前 React Native 项目还很年轻，不够成熟可能是其最大的风险。它的文档确实还有提升的空间，同时项目也在不断升级和改进。一些特性在 iOS 和Android 平台上仍未得到支持，社区也在不断寻找最佳的开发实践。不过，好在大多数情况下你都可以自己实现那些缺少的接口，我们也会在第 7 章讨论相关内容。

React Native 在你的项目中引入了新的一层，因此带来了一些调试上的麻烦，尤其是在 React 和宿主平台交互时。我们将在第 8章更加深入地讲解 React Native 的调试技巧，并探讨一些常见的问题。

React Native 依然还很年轻，追随新技术时可能遇到的问题在此也不可避免。不过总体来说，我觉得你将会看到它带来的收益大于风险。

1.3 小结

React Native 是一个振奋人心的框架，它使得 Web开发者可以使用他们现有的JavaScript知识开发出强大的移动应用。在不牺牲用户体验和应用质量的前提下，React Native 提高了开发效率，提供了在iOS、Android和 Web 平台上的代码共享。由于它依然很新并且还在持续不断地更新，你在使用时需要作一番权衡。如果你的团队可以解决新技术带来的不确定问题，并且想开发跨平台的应用，那么不妨试试 React Native 吧。

在下一章中，我们将看一看 React Native 与 React主要有哪些不同，并讲解一些关键的概念。如果你想跳过这个部分，可以直接跳到第3章的实战部分，第3 章会从开发环境的搭建讲起，着手开发我们的第一个 React Native 应用。

【下载地址】

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

提取码：hhrt