跳至主要内容

一篇带有“展示案例”标签的文章

查看所有标签

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

·阅读时间 5 分钟
Garrett McCullough
Garrett McCullough
高级移动工程师

总部位于加州奇科的 Build.com 是最大的家居装修用品在线零售商之一。该团队拥有 18 年的强大网络业务，并于 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 和 Apple Pay（适用于 iOS 用户）。

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

  1. 约 40 种产品提供 90 种饰面的 3D 模型
  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 配置，强制执行测试所需属性的自定义规则以及阻止违规更改的预提交钩子。

应用中使用的库​

Build.com 应用依赖于许多常见的开源库，包括：Redux，Moment，Numeral，Enzyme 和许多 React Native 桥接模块。我们还使用了一些分叉的开源库；分叉的原因要么是因为它们被废弃了，要么是因为我们需要自定义功能。快速统计显示大约有 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 社区的公司和个人一直以来都非常乐意贡献时间和精力来改进我们使用的工具。如果你还没有参与开源，我希望你能考虑改进你使用的某些库的代码或文档。有很多文章可以帮助你入门，这可能比你想象的要容易得多！