React Native 项目配置的 15 个姿势

Mahesh Haldar 原作,授权 New Frontend 翻译。

React Native 对移动端应用开发而言是一场革命,使用过 Phone-gap、Ionic 或其他基于 Web 的移动端应用开发框架的开发者,大概感受尤为深刻。

如果你的目标是开发一个可扩容、可维护的生产环境应用,那么仅仅使用 React Native 本身恐怕不够。配置项目时,需要引入大量开源社区创建的 npm 包,这样可以加速推进开发。

这篇文章会讨论一些库和工具。配置你的下一个 React Native 项目时,它们值得考虑。我希望这篇文章能帮助你做出决策。

1. React Native 基础框架

React Native 建议使用 Expo CLI 或 React Native CLI 创建项目。这两个工具各有千秋:

Expo CLI

  • ✅迅速上手,很快就可以开始写代码了。
  • ✅应用的分发和安装都很迅捷。
  • ✅很适合 demo 或者概念验证项目。
  • 🔴应用尺寸会增加 20 到 25 MB。
  • 🔴长期项目不推荐使用。参见 Expo CLI 官方文档列出的限制
  • 🔴不支持编写原生代码。不过,在 React Native 项目中还是可以调用 Expo API 的。

React Native CLI

  • ✅方便加入 Android 和 iOS 原生代码。
  • ✅适合大项目。
  • 🔴分发、安装应用不那么容易。
  • 🔴需要一台 Mac 做 iOS 开发。

2. 静态类型

身为 JavaScript 开发者,我慢慢感到自己写的代码需要静态类型。静态类型检测有助于更早发现错误,提高代码可读性。

TypeScript

TypeScript 号称 JavaScript 的超集,提供了许多语法糖。

  • ✅社区很庞大。TypeScript 广泛用于各种前后端框架。
  • ✅比 Flow 更快。
  • 🔴React 支持稍逊 Flow。

Flow

Flow 并不是一门编程语言,只为 JavaScript 提供了静态类型检测。

  • ✅React 支持更佳。
  • 🔴Facebook 有从 Flow 转移到 TypeScript 的趋势。
  • 🔴较小的社区。
  • 🔴文档不那么丰富。

3. HTTP 请求客户端

你的应用多半需要调用 API,因此,你需要一个 HTTP 客户端:

Axios

  • ✅久经考验的经典库。
  • 🔴如需调用 GraphQL API,需要另找一个库。

GraphQL Apollo 客户端

  • ✅同时支持调用 REST API 和 GraphQL API。
  • ✅开箱即用的缓存功能。
  • 🔴生产环境应用使用率不高。

4. 可复用 UI 组件的管理

尽可能地复用代码,构建容易维护的代码库,保持用户界面的一致性,这些需求意味着我们需要寻找基于云组件的管理方案。

Bit.dev

  • ✅持续发布组件。
  • ✅从任意仓库便捷地引入、安装组件。
  • ✅在同一个地方组织管理组件,为其编写文档。
  • ✅出色的 React Native 支持。

5. 单元测试配置

应用想要稳定,良好的单元测试不可或缺。

Jest 搭配 enzyme

  • ✅十分简单易用的测试框架。
  • ✅Jest 还可以配合 TypeScript、Node、React、Angular、Vue 等使用。
  • ✅内置 mocking 功能。
  • ✅庞大的社区。

6. 状态管理

如果是长期项目或者规模较大的项目,那么你需要更好的策略管理状态,以及在组件间共用状态。我推荐以下选项:

Redux

  • ✅庞大的社区,丰富的模式,经过了生产环境的充分考验。
  • ✅时间旅行功能在开发和调试阶段非常好用。
  • 🔴性能不如 Mobx 之类的状态管理库那么好。

Mobx

  • ✅性能更好。
  • 🔴扩容能力不如 Redux。
  • 🔴不太适合复杂的大型项目。

HookContext API

Redux 内部使用了 Context API。Context API 曾经是实验性 API,不过在 React v16.4+ 后已经正式发布。所以我们可以直接使用 Hook 和 Context API,避免依赖 Redux 这个库,这样也能减少应用尺寸。这样做利弊如下:

  • ✅无需引入额外的依赖,有助于减少应用尺寸。
  • 🔴需要规划,也要求团队成员都遵循一致的规范。

7. 导航

多页面(screen)应用需要我们定义方便扩容、易于维护的路由和导航。

React Navigation

  • ✅庞大的社区。
  • ✅覆盖了大多数常见的使用场景,包括基于名称(name-based)的路由、从路由传递信息、标签页导航、鉴权流程、深链(deep linking)、统计分析触发器等。
  • ✅你也可以使用预定义的 React 导航 hook。

8. 表单

React 的原生表单写起来不爽,就我个人而言,大多数场景下直接编写 React 表单都很别扭。因此我们需要寻找更容易编写和维护,对开发者更友好的方式。

Formik

  • ✅庞大的社区。
  • 🔴性能不如 react-hook-form。

React Hook Form

  • ✅性能比 Formik 好。
  • ✅基于 hook,因此对开发者更友好,也更容易使用。
  • 🔴社区比较小。

9. 配置加载

开发复杂大型项目时,我们希望项目可以适用各种环境,容易扩容,支持持续部署,这就需要一个配置加载框架。

推荐react-native-config

10. 国际化(i18n)

React Context API

  • ✅直接使用 React 内置的 Context API。
  • ✅用起来很简单。
  • 🔴单复数、阴阳性之类的高级特性需要定制。

react-i18next

  • ✅社区庞大,使用广泛。
  • ✅特性丰富(例如单复数、阴阳性)。
  • 🔴因为这是一个第三方库,所以相比内置的 Context API,会增加应用尺寸。

11. 应用动态更新

React Native 的架构允许我们将问题修复和更新直接送达用户(热更新),也就是说不需要经过打包,发布到应用商店,等待用户更新应用的流程。可以使用微软的 CodePush 服务。

12. 应用统计分析

统计分析很重要,可以让我们了解、监测客户行为。大多数场景下,使用 Firebase Google Analytics 就可以满足基本需求。如果你需要技术支持,或者有一些特殊的需求,例如分析广告及其到达率,基于营销渠道的统计分析等,可以考虑 CleverTapAppsflyermixpanel 这些付费方案。

13. 故障报告分析

Firebase Crashlytics

Google 收购了知名的故障分析工具 Fabric,现在称为 Firebase Crashlytics。这个免费服务向你提供精美的故障报告。Firebase 也集成了 Slack 支持,故障发生时你能收到实时通知。

14. 测试应用分发平台

大多数时候,在发布到应用商店之前,我们需要先把应用分发给团队成员和一些客户,这样可以收到一些早期的反馈。

Firebase

  • ✅免费,附带许多 Google 服务,包括故障分析、统计分析、OCR,等等。
  • 🔴配置、发布应用可能需要较长时间。
  • 🔴目前处于 beta 阶段。

App Center

  • ✅免费分发,附带故障分析和统计分析服务。
  • 🔴配置、发布应用可能需要较长时间。

TestFairy

  • ✅面向企业用户,包含技术支持。
  • ✅有一些酷炫的特性,比如摇一摇设备报 bug(会在 Jira 创建一个工单)。
  • ✅自动录制视频,记录触发崩溃、问题的用户使用流程。
  • 🔴需要付费使用。(译者注:有比较受限的免费试用选项。)

15. 应用自动签名和发布

任何大型团队都应该自动化应用的签名、发布流程,这可以节约大量时间,也能避免很多人为失误。

自建

你可以考虑使用 Fastlane 这样的开源工具来自动化签名、构建 apk 和 ipa 文件的流程。然后将应用发布到上一小节提到的那些平台。

  • ✅自行掌控,节约费用。
  • 🔴需要大量时间配置。
  • 🔴端到端配置需要专门技能和知识。
  • 🔴构建 ipa 文件需要在 CircleCI 或 Travis 上运行相应流程,或者在自己的 Mac mini 机器上跑。

Bitrise

构建、发布应用最简单和迅捷的方式之一。

  • ✅快速配置。
  • ✅无缝集成 Firebase、Slack 及其他平台。
  • ✅基于 Fastlane。
  • ✅构建 Android 和 iOS 应用的一站式解决方案。
  • 🔴需要付费。(译者注:有比较受限的免费选项,不过只适合业余项目。)

本文就到此为止了,我希望这篇文章对你有所帮助。

如果你发现我在优劣对比部分漏掉了值得一提的内容,请给我留言。

如果有更好的工具或库推荐,也欢迎留言。

持续学习,持续应对。(译者注:「持续应对」原文是 keep on Reacting,双关。)

coffee-cup

如果这篇文章对你有帮助,那么你可以考虑请我喝杯咖啡。(译者注:这是原文作者的 PayPal 链接。)

评论

Loading comments ...