我们的方案就是 Navigator 组件, React Native 的 CustomComponents 目录下附带就有这个东西能拿来用。实质上,它就是一个由其他的 React 组件堆积起来的 React 组件集合. 它可以显示这些组件中的一个组件,并且这些组件会在按下按钮或者发生触摸时动画轮换。它还有一个可插入式的导航条组件, 让我们可以实现一个 iOS 风格的,用于大多数一般视图的导航条,用于导航广告和宣传活动的面包屑导航,以及一个用于创建流程的向导式导航。导航条组件的动画进度条可以接收通知,并且匹配性的显示进度增加的动画。这意味着所有的动画,针对视图的以及针对导航条的,都是用 JavaScript 来进行计算的, 而测试显示我们仍然可以以 60 fps 的帧率执行它们。
YouTube 视频地址:https://youtu.be/a6yJ7M8FoEo
只有一种情况下导航动画才会有问题,那就是当 Javascript 线程在一个长操作过程中被阻塞时。这种情况基本都是由处理大量新获取的数据引起的。当然当你切换到新的页面,读取和处理新的数据是不可避免的。在一个网速快的环境下, 这个问题可以用正在加载的导航动画来解决。在这里我们采取另一种方案:在动画完成前,是用 InteractionManager 组件显式延迟数据处理(这个是 Reactive Native 内置的组件)。首先我们先切换到包含模板的页面,然后使用 Relay 来做数据处理,接着他会自动调用必要的 React 组件来重新渲染界面。
部署到 Android既然 iOS 的广告管理器快要部署完成了,我们现在给这个 app 部署一个 Android 版本。使用 Reactive Native 的 Android 移植版应该是最好的选择。幸运的是,Reactive Native 团队已经将 Android 移植版做的够好了。通常我们想尽可能重用代码,不仅是业务逻辑也有 UI,因为大多数页面是基本相同的,为调整样式节省了时间。当然也有一些地方 Android 版的外观和 iOS 版是需要不同的,比如导航,日期选择器和开关按钮等等。
YouTube 视频地址:https://youtu.be/MNNR01NF290
幸运的是,React Native 打包器的黑名单功能和 React 的抽象机制帮助我们尽可能的在两个平台之间复用代码,尽可能减少对平台的检查。对于 iOS,可以告诉打包器忽略以 .android.js 结尾的文件。而开发Android 的时候,则是忽略 .ios.js 结尾的文件。这样,我们就可以对同一个组件用 Android 和 iOS 分别实现一次,而使用组件的代码可以是平台无关的。我们不是显示的用 if/else 的方式来检测平台,而是重构平台相关的UI部分,分割成不同的需要 Android 和 iOS 分别实现的组件。在发布 Android 版广告管理器的时候,代码的复用率达到了大约85%。
我们面临的一个大的挑战是如何管理代码。在 Facebook,Android 和 iOS 的代码在不同的代码仓库里。广告管理器的 iOS 版本的代码在 iOS 代码库里,而由于各种原因,Android 版本的代码只能在 Android 代码库里。就像 iOS 版那样,我们需要使用一些 Android 代码库里的 Facebook 的 Android 库。另外,所有的构建、自动化和持续集成工具都绑定了 Android 代码库。如果把已有的 iOS 版代码重构,抽象出平台无关的组件用于 Android 版的移植,则意味着我们要经常 fork 和 merge 相同的代码的两个不同版本。对我们来说,这种情形不能接受。
最后我们决定把 iOS 代码库当做可信的代码源,主要是因为代码已经存在并且 iOS 版的 App 也已经成熟了。我们通过 cron 的任务每天把所有 JavaScript 代码从 iOS 同步几次到 Android 代码库。直接提交 JavaScript 代码到 Android 仓库是不被允许的,除非同时提交到 iOS 仓库。如果同步脚本检测到有不一致的地方,会生成一个任务,后续去进一步检查。
我们同时还做到了让 JavaScript 打包服务器从 iOS 仓库运行 Android 代码。这样的话,那些主要开发 JavaScript,不涉及 native 代码的开发人员就可以基于 iOS 代码库开发和测试自己的代码改动。不过在测试在两个平台上的改动时,还是需要从 Android 代码库构建 Android 应用,从 iOS 代码库构建 iOS 应用,这是一件很麻烦的事情。为了优化 JavaScript 程序员的开发流程,我们开发了一些脚本,用来从持续集成服务器上下载合适的 native 二进制代码文件。这使得大多数的开发者不需要保留 Android 代码库的副本,他们可以直接在可信的 iOS 源代码上开发,这样就可以像在 Facebook 的 web stack 上一样快速迭代。