跳至主内容

用 React Native 打造 - Build.com 应用

· 1 分钟阅读
Garrett McCullough
Garrett McCullough
高级移动开发工程师
非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

Build.com总部位于加利福尼亚州奇科市，是家装领域规模最大的在线零售商之一。团队18年来始终专注于网页业务，并于2015年开始规划移动应用。由于团队规模有限且原生开发经验不足，同时构建Android和iOS双平台应用并不现实。因此我们决定冒险尝试当时全新的React Native框架——2015年8月12日我们首次提交代码，使用的正是React Native v0.8.0！2016年10月15日，应用正式登陆两大应用商店。过去两年间，我们持续升级并扩展应用功能，目前运行的是React Native v0.53.0版本。

您可通过https://www.build.com/app体验这款应用。

功能亮点​

我们的应用功能完备，包含电商应用应有的所有特性：产品展示、搜索排序、复杂产品配置、收藏夹等。支持标准信用卡支付，同时为iOS用户提供PayPal和Apple Pay选项。

以下特色功能可能超出您的预期：

  1. 约40款产品提供90种表面处理的3D模型展示

  2. 增强现实(AR)功能让用户以98%的尺寸精度预览灯具/水龙头在家中的实际效果。Build.com的React Native应用因此入选苹果应用商店AR购物推荐！现已在Android/iOS双平台开放AR功能！

  3. 协作式项目管理功能，支持用户为项目不同阶段创建采购清单并协同筛选商品

我们正在开发多项激动人心的新功能以持续优化应用体验，包括AR沉浸式购物的下一阶段升级。

开发工作流​

Build.com允许每位开发者选用最适合自己的工具：

  • 集成开发环境包括Atom、IntelliJ、VS Code、Sublime、Eclipse等

  • 单元测试方面，开发者需为新组件编写Jest单元测试，同时正通过jest-coverage-ratchet提升旧模块的测试覆盖率

  • 使用Jenkins构建测试版和候选发布版，该流程运行良好但生成版本说明等文档仍需大量工作

  • 集成测试由跨桌面/移动/网页平台的共享测试池完成，自动化工程师正基于Java+Appium构建自动化测试套件

  • 工作流还包括精细的eslint配置、强化测试所需属性的自定义规则，以及拦截问题代码的预提交钩子

应用依赖库​

Build.com应用依赖多个主流开源库：Redux、Moment、Numeral、Enzyme及众多React Native桥接模块。同时使用了若干分叉版本的开源库——或因原项目停止维护，或因需定制功能。粗略统计约含115个JavaScript与原生依赖项，未来计划探索移除未使用库的工具。

我们正通过TypeScript引入静态类型检查，并探索可选链式调用(optional chaining)特性。这些功能有助于解决以下两类常见问题：

  • 数据类型错误

  • 因对象属性缺失导致的未定义数据

开源贡献​

由于我们深度依赖开源技术，团队致力于回馈社区。Build.com 允许我们将自建库开源，并鼓励我们为使用的开源库贡献代码。

我们已发布并维护了多个 React Native 库：

  • react-native-polyfill

  • react-native-simple-store

  • react-native-contact-picker

我们还为众多库贡献过代码，包括：React 和 React Native、react-native-schemes-manager、react-native-swipeable、react-native-gallery、react-native-view-transformer、react-native-navigation。

我们的历程​

过去几年间，我们见证了 React Native 及其生态系统的显著成长。早期每个 React Native 版本在修复部分问题的同时总会引入新问题。例如 Android 平台的远程 JS 调试功能曾失效数月之久。值得欣慰的是，2017 年后平台稳定性大幅提升。

导航库​

导航库的选择始终是我们面临的主要挑战。我们曾长期使用 Expo 的 ex-nav 库，效果良好但最终停止维护。由于当时正处于密集功能开发阶段，我们不得不分叉该库并自行添加对 React 16 和 iPhone X 的支持。最终我们成功迁移到 react-native-navigation，期望它能获得长期维护。

桥接模块​

另一大挑战来自桥接模块。项目初期许多关键桥接功能缺失，例如团队成员开发了 react-native-contact-picker 来实现 Android 通讯录选择功能。同时 React Native 的版本升级常导致桥接模块失效，例如 v40 升级时我们不得不主动提交 PR 修复了 3-4 个未更新的库。

未来展望​

随着 React Native 持续发展，我们对社区有以下期待：

  • 增强导航库的稳定性与功能

  • 保持 React Native 生态库的兼容维护

  • 优化原生库和桥接模块的集成体验

React Native 社区中的企业和个人始终积极贡献时间精力改进共享工具。若您尚未参与开源贡献，不妨尝试改进所用库的代码或文档。相关入门指南非常丰富，实践难度可能远低于您的预期！