跳到主内容

使用 React Native 构建 - Build.com 应用

·6 分钟阅读
Garrett McCullough
Garrett McCullough
高级移动工程师

Build.com 总部位于加利福尼亚州奇科，是最大的家居装修用品在线零售商之一。该团队拥有 18 年强大的以 Web 为中心的业务，并于 2015 年开始考虑开发移动应用。由于我们团队规模较小且原生开发经验有限，构建独特的 Android 和 iOS 应用并不实际。相反，我们决定冒险使用当时非常新的 React Native 框架。我们于 2015 年 8 月 12 日进行了首次提交，当时使用的是 React Native v0.8.0！我们于 2016 年 10 月 15 日在两个应用商店上线。在过去两年中，我们持续升级和扩展该应用。我们目前使用的 React Native 版本是 0.53.0。

您可以在 https://www.build.com/app 查看该应用。

功能​

我们的应用功能齐全，包含了您对电商应用所期望的一切：商品列表、搜索和排序、配置复杂商品的能力、收藏等。我们支持标准信用卡支付方式，以及 PayPal 和为 iOS 用户提供的 Apple Pay。

一些您可能意想不到的突出功能包括：

  1. 约 40 种产品提供 3D 模型，拥有 90 种表面处理
  2. 增强现实（AR）功能允许用户以 98% 的尺寸精度查看灯具和水龙头在家中的效果。Build.com React Native 应用在 Apple App Store 中被推荐用于 AR 购物！AR 现已支持 Android 和 iOS！
  3. 协作项目管理功能，允许人们为项目不同阶段创建购物清单并协作选择

我们正在开发许多令人兴奋的新功能，将持续改进我们的应用体验，包括 AR 沉浸式购物的下一阶段。

我们的开发工作流程​

Build.com 允许每位开发人员选择最适合他们的工具。

  • IDE 包括 Atom、IntelliJ、VS Code、Sublime、Eclipse 等。
  • 单元测试方面，开发人员负责为任何新组件创建 Jest 单元测试，并且我们正在努力使用 jest-coverage-ratchet 来提高应用旧部分的覆盖率。
  • 我们使用 Jenkins 构建我们的 Beta 版和发布候选版。这个过程对我们来说效果很好，但创建发布说明和其他工件仍然需要大量工作。
  • 集成测试包括一个共享测试人员池，他们负责桌面、移动和 Web 端的测试。我们的自动化工程师正在使用 Java 和 Appium 构建我们的自动化集成测试套件。
  • 工作流程的其他部分包括详细的 eslint 配置、强制执行测试所需属性的自定义规则，以及阻止问题更改的 pre-push 钩子。

应用中使用的库​

Build.com 应用依赖于许多常见的开源库，包括：Redux、Moment、Numeral、Enzyme 和许多 React Native 桥接模块。我们还使用了一些分支（forked）的开源库；分支它们要么是因为它们被弃用，要么是因为我们需要自定义功能。粗略统计显示，大约有 115 个 JavaScript 和原生依赖项。我们希望探索可以移除未使用库的工具。

我们正在通过 TypeScript 添加静态类型，并研究可选链。这些功能可以帮助我们解决仍会遇到的一些类别的错误

  • 类型错误的数据
  • 由于对象不包含我们期望的内容而导致未定义的数据

开源贡献​

由于我们高度依赖开源，我们的团队致力于回馈社区。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 版本都会修复一些错误，但同时引入更多新问题。例如，远程 JS 调试在 Android 上中断了几个月。值得庆幸的是，2017 年情况变得稳定多了。

我们面临的一个主要且反复出现的挑战是导航库。很长一段时间里，我们一直在使用 Expo 的 ex-nav 库。它对我们来说运作良好，但最终被弃用了。然而，当时我们正处于大量功能开发阶段，因此抽出时间更换导航库是不可行的。这意味着我们不得不分支该库并对其打补丁，以支持 React 16 和 iPhone X。最终，我们成功迁移到 react-native-navigation，并希望它能持续得到支持。

桥接模块​

另一个重大挑战是桥接模块。我们刚开始时，许多关键的桥接模块都缺失了。我的一位队友编写了 react-native-contact-picker，因为我们的应用需要访问 Android 联系人选择器。我们还遇到许多因 React Native 内部更改而损坏的桥接模块。例如，React Native v40 中有一个破坏性变更，当我们升级应用时，我不得不提交 PR 以修复 3 或 4 个尚未更新的库。

展望未来​

随着 React Native 的持续发展，我们对社区的愿望清单包括：

  • 稳定并改进导航库
  • 维护对 React Native 生态系统中库的支持
  • 改进向项目添加原生库和桥接模块的体验

React Native 社区中的公司和个人都非常乐意贡献他们的时间和精力来改进我们大家使用的工具。如果您还没有参与开源，我希望您能尝试改进您所使用的一些库的代码或文档。有许多文章可以帮助您入门，而且可能比您想象的要容易得多！