第 1 章 初识 React Native

第 1 章 初识 React Native

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

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

React Native 项目的核心代码实现同时支持 iOS 和 Android。开发者社区还提供了其他平台的实现支持,包括 Windows(https://github.com/Microsoft/react-native-windows)、Ubuntu(https://github.com/CanonicalLtd/react-native)和 Web(https://github.com/necolas/react-native-web),等等。

没错,你完全可以用 React Native 来开发用于正式发布的移动应用。据了解,Facebook、Airbnb、Walmart 和百度等公司,已经在生产环境中使用它来提供面向用户的应用。

1.1 React Native的优点

事实上,React Native 调用宿主平台标准渲染 API 的方式已经使它从其他现有的跨平台应用开发方案(比如 Cordova 或 Ionic)中脱颖而出。目前通过编写 JavaScript、HTML 和 CSS 的方式进行应用开发的方案大多使用 WebView 进行界面渲染,当然这种方案是可行的,但也带来了一些问题,尤其是性能损耗。同时,这种方案通常无法使用宿主平台的原生 UI 组件,所以这些框架尝试去模仿原生 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,我们查看修改结果时不需要重新编译。相反,只需要和网页开发一样,刷新应用即可。在传统移动端开发中,编译构建应用所花费的时间会积少成多,相比之下 React Native 的快速迭代就像是天赐之福。

React Native 还可以让你更好地利用智能调试工具以及错误报告机制。如果你习惯于使用 Chrome 或者 Safari 的开发工具(见图 1-1),那么使用它们进行移动开发一定也会让你十分愉悦。同样,你可以选择喜爱的任何文本编辑器来开发 JavaScript。React Native 不强制你使用 Xcode 进行 iOS 开发,也不强制使用 Android Studio 进行 Android 开发。

图 1-1:使用 Chrome 调试器开发 React Native

除了能逐渐改善开发者体验之外,React Native 也有可能给你的产品发布周期带来一些积极的影响。例如,Apple 公司和 Google 公司允许通过网络对基于 JavaScript 开发的功能进行更新,无须额外的审核周期。对于 iOS 平台来说这非常实用,因为应用的更新周期通常需要数天甚至是数周时间来审核。

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

1.1.2 代码复用与知识共享

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

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

1.2 风险和缺点

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

由于 React Native 在项目中会引入额外的一层,因此带来了一些调试上的麻烦,尤其是在 React 和宿主平台进行交互时。在第 9 章中,我们会深入讨论 React Native 的调试,并尝试解决一些最常见的问题。

同样,当宿主平台发布更新时——例如新版本的 Android 发布了一套新的 API 时——要让 React Native 完全支持它,会有一定的滞后时间。好消息是,在绝大多数情况下,你可以自行实现对缺失的 API 的支持,我们会在第 7 章中说明。此外,如果你确实遇到了障碍,也不需要被 React Native 框架所困住——许多公司都已经成功实现了混合开发应用的方式。

在编写应用时,选择平台确实是一项非常重要的抉择。不过总体来说,我觉得你将会看到它带来的收益大于风险。

1.3 小结

React Native 是一款振奋人心的框架,它使得 Web 开发者可以使用他们现有的 JavaScript 知识开发出强大的移动应用。在不牺牲用户体验和应用质量的前提下,React Native 提高了开发效率,提供了在 iOS、Android 和 Web 平台上的代码共享。由于它会让你的应用安装变得有些复杂,你在使用时需要作一番权衡。如果你的团队可以解决这一问题,并且想开发跨平台的应用,那么不妨试试 React Native 吧。

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

目录

  • 版权声明
  • O'Reilly Media, Inc.介绍
  • 前言
  • 第 1 章 初识 React Native
  • 第 2 章 React Native 工作原理
  • 第 3 章 构建你的第一个应用
  • 第 4 章 移动应用组件
  • 第 5 章 样式
  • 第 6 章 平台 API
  • 第 7 章 模块和原生代码
  • 第 8 章 平台特定代码
  • 第 9 章 调试与开发者工具
  • 第 10 章 大型应用中的导航与结构
  • 第 11 章 大型应用中的状态管理
  • 总结
  • 附录 A 现代 JavaScript 语法
  • 附录 B 部署应用
  • 附录 C 使用 Expo 应用
  • 作者简介
  • 关于封面