写给移动开发者的 React Native 指南

版权声明：本文原创发布于公众号 wingjay，转载请务必注明出处！ https://www.jianshu.com/p/b88944250b25

前言

React Native 诞生于 2015 年，名副其实的富二代，主要使命是为父出征，与 Apple 和 Google 抗衡，为开发者带去一套跨平台、动态更新的 Javascript 框架，口号是：Learn once, write anywhere：Build mobile apps with React。在试图推翻 Android 和 iOS 压制的同时，还提携了一把自家兄弟：React。

从诞生之日 React Native 就充满了期待和争议。期待是无数开发者希望不用忍受频繁发版的噩梦，也不用同时为两个平台开发业务逻辑几无差别的两个 App；争议是 React Native 真的能以一己之力救大众于水火吗？React Native 在跨平台时还能保持良好的用户体验吗？

当然我们知道，这种问题向来都是仁者见仁，智者见智。比起一味的疑惑、争论，还不如来好好看看这货究竟是个啥？甚至自己动手来玩一把。

本文主要针对两类读者：

• 想要入门 RN 的人，在阅读官方文档前先对 RN 形成一个整体的印象
• 对 RN 心存好奇，在犹豫是否要入坑的开发者，可以通过本文对 RN 更客观全面的认识

目录

• React Native 好在哪
  • 跨平台＋动态更新
  • 代码复用
  • RN vs Weex
  • RN vs Hybrid
  • RN 劣势
• React Native 运行机制
• RN 开发环境搭建
• 引入 React Native
  • Build from Scratch
  • 集成到已有项目
• Javascript、React 及 ES6、JSX 语法
• UI 层
• 网络请求层
• Debugging 调试
  • In-App 报错
  • Console.log
  • 大杀器：Chrome 逐行调试
• 从 JS 调用 Native 方法或显示自定义 Native View
  • Native Modules：JS 里直接调用 Native(Java/Swift) 方法
  • Native UI Component：JS 里直接调用自定义的 Native View
• React Native 适合你吗？
• 为什么要写这篇文章

一、React Native 好在哪

下面我们来看下 Hybrid 及 React Native 等开发模式包含了哪些常规移动开发所不具备的优势。

1. 跨平台＋动态更新

传统的客户端开发模式是怎样的呢？

Android 与 iOS Team 分别编写客户端代码，打包，分发到 Play Store 和 Apple Store，通过更新 JSON 数据来更新页面。

不过，当客户端发生严重问题而服务器上无法 quick fix 时，就不得不重新发版。

对国外 Android 市场而言还好，因为能通过 Play Store 快速更新；国内 Android 市场则由于分发渠道太杂，很难及时把新版本立即推送给所有用户，当然这也是为何热修复技术在国内盛行而国外冷清的原因；而 Apple Store 则需要一定的审核时间，而且最近又在抓 iOS 热修复框架如 JsPatch、Rollout 等。

相比而言，Hybrid 和 RN/Weex 模式除了能下发 Json 数据来刷新界面内容，更能直接下发业务逻辑代码，直接实现整体 App 的更新。而且，它们不用在乎 Android 和 iOS 两个平台，因为一份 JS 代码写好后，把 JS Bundle 放在服务器上，所有的客户端立即更新。

2. 代码复用

一般而言，同一款产品的 Android 和 iOS 两端除 UI 有些许不同外，多数业务逻辑几乎完全一致，这便造成了人力的浪费。

而最近 Instagram 的官博 React Native at Instagram 一文中已经提到，利用 RN (React Native 缩写，下同) 开发的 feature 可以实现 85% - 99% 的代码复用率。这意味着我们可以用更少的人力成本来达到相同的效果。

3. RN vs Weex

实现上面的效果有两种开发框架：混合开发框架 Cordova 和基于 Javascript 的 React-Native、Weex 框架。

下面我从自己的实践经验出发做些比较，也欢迎读者提出自己看法。

最开始觉得 RN 的学习成本比较大，所以首先考虑了 Weex 框架，据说是阿里巴巴良心出品。不过在尝试后不得不选择了放弃，原因有这几点：

• Bug 较多。我们最先测试了最基本的 ListView，在 iOS 运行良好，而同样的 Demo 代码到了 Android 这边的下拉刷新就出现了问题，这使得我们开始警惕；
• 社区、文档弱，GitHub Issue 基本是中文。当然我毫无歧视中文之意。我认为，一套项目开源是真正意义是希望借助开源社区的力量，一起来完善改进，因此要优先推崇英文，使项目国际化，得到全世界开发者的共同支持，这样才是可持续的模式。而 Weex 的 Issue 里放眼望去基本 90% 都是中文，无论提问者还是项目维护者。这一点直接把国外优秀的开发者拒之门外，也很难让我看到多么长远的未来。
  下面是摘取的 RN 里的一则中文 issue：

**Issue is for bug report, not for Q&A**

• Contributor 差别。因为上面一点，Weex 的 Contributor