Facebook 是如何构建首个跨平台 React Native 应用的?

今年早些时候,我们发布了 React Native for iOS。React Native 将开发者在 web 上所使用的 React — 拥有声明式的自包含组件以及快速的开发周期 — 带到了移动平台, 同时保留了原生应用程序的运行速度、保真度及外观。今天,我们很高兴地发布了 React Native for Android

现在我们已经在 Facebook 的生产环境中使用 React Native 超过一年了。几乎就是一年之前,我们的团队着手开发广告管理应用。当时我们的目标是创建一个新的应用,它能让数以百万计在 Facebook 上做广告的人们能随时随地的管理他们的账户,并创建新的广告。最后的成果不仅仅是 Facebook 第一完全使用 React Native 开发的应用, 而且是首次实现跨平台的一个应用。本文将跟您分享我们是如何构建这个应用的,React Native 是如何是的我们行动更快的,以及我们所积累的教训。

选择 React Native

不久之前,React Native 仍然还是一中没有在生产环境中得到验证的新技术。所以利用该技术开发一个新的应用要承担一些风险,不过这些风险已经被其潜在能带来的好处盖过去了。

首先,我们最初由三个产品工程师组成的团队已经对 React 很熟悉。其次,这个应用需要包含许多复杂的业务逻辑来精细的处理各种不同广告格式、时间轴、日期格式、货币、货币约定等等东西。这些许多都已经用 JavaScript 写好了。全部用 Objective-C 写一遍之后为开发 Android 版本再用 Java 写一遍,这种方案的前景对我们并没有什么吸引力——当然也并不高效。第三,要实现大多数我们想要构建的 UI 界面 — 以列表、表格或者图像的方式展示许多的数据——在 React Native 中做会比较容易。了解了 React,产品工程师应该可以快速高效的实现这些视图。

当然,有些特性对这个新平台而言却是是一种挑战 — 例如图像编辑器,它可以用来给广告主缩放和裁剪一张照片,还有地图视图,它可以用来给广告主在以一个位置为中心的特定半径内定位人员。另外一个例子就是面包屑导航,它能帮助广告主看清楚他们账户中的广告层级。这些都向我们提供了将这个平台推向更远的机会。

Facebook 是如何构建首个跨平台 React Native 应用的?

Facebook 是如何构建首个跨平台 React Native 应用的?

首先为 iOS 构建广告管理器

我们的团队决定首先实现这个应用的一个 iOS 版本,这样的安排还不多,React Native 一开始也是针对 iOS 而开发的。接下来的几个月我们的团队成员从 3 名工程师发展到了 8 名。新聘人员对 React 不熟悉 — 而他们其中一些人对 JavaScript 也不熟悉 — 但他们都渴望为我们的广告主构建一种优秀的移动体验,所以他们成长得很快。

React Native 团队中有经验的 iOS 工程师帮助我们在 React Native 中桥接了一些终端设备上暂时还用不着的功能特性,比如提供对手机摄像头的访问。他们还帮助我们将已经被应用在其它 Facebook 应用中的,执行用户认证、分析、奔溃报告、网络以及推送通知这些操作的一些 iOS 库,捆绑到了应用。这样就让我们的团队只用去关注构建这个产品。

如上所述,我们能够重用许多之前已经有了的 JavaScript 库。一个这样的库就是 Relay,Facebook 的一个通过 GraphQL 将数据传递到 React 的框架。另外还有一些处理国际化和本地化(这些逻辑在涉及到时间域和货币时会变得有些棘手)的库。通常这些库会从网站的一个 JSON 端点加载正确的配置。我们已经编写了脚本将所有支持的语言导出为 JSON 文件,使用 iOS 的本地化包来引入这些文件,然后拥几行 native 代码就能将 JSON 数据暴露给 JavaScript。这让我们的库几乎不做什么修改就能拿来用。

我们所面对过的比较大一个挑战之一就是导航流。为了对广告主现有的广告和宣传活动进行导航,我们想要有一个导航条。针对广告的创作流程,我们需要一个向导式的导航条。最重要的是,让应用拥有正确的渐变动画以触摸手势也很关键,否则应用感觉上会更像是一个漂亮的移动网站,而不是一个原生应用。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/38d03b19ab9fb7027e41193b2a1ac533.html