专栏名称: 非非白

为 React Native 撸一个原生导航框架

非非白 · 掘金 · · 2018-01-07 13:15

正文

笔者去年 10 月份正式接触 ReactNative，因为公司有计划采用 RN 来实现新的业务。在此之前，笔者已有数年原生应用开发经验。在接触 RN 之初，深深地感觉到 RN 的导航框架 react-navigation 缺乏原生的质感。笔者于是寻找原生导航的解决方案。在 RN 的官网引导下，知道了 native-navigation 以及 react-native-navigation .

native-navigation 是 airbnb 的开源项目，iOS 版本是用 swift 实现的，这点让笔者很奇怪，因为 ReactNative 使用 objc 写的，它的导航库用 swift 写合适吗。Android 版采用了 Fragment 来作为 ReactRootView 的容器，这点我非常认同。然而，这个项目居然去年 6 月份就暂停了，airbnb 方面的解释是他们有优先级更高的事情要做。笔者猜测，可能 react-navigation 的发布已经能满足他们的需求了。

react-native-navigation, 笔者在做调研时，据说它有很多坑，尤其是 Andriod。它的 v2 版本也在开发当中，直到笔者写下这段文字时，v2 还没开发完成。它的 Android v1 是用 dialog 实现的，这点让笔者感到很奇葩。以为它的 Android v2 会用 Fragment 来实现，然而并没有，这次用的是自定义 View。可能作者吃了不少 Fragment 的苦头，打死也不会再用 Fragment 了。此外 react-native-navigation 并不支持原生页面和 RN 页面互相跳转。

公司要引入 ReactNative，怎样让 RN 和原生完美融合，分辨不出哪些是原生页面哪些是 RN 页面呢。于是笔者决定撸一个原生导航框架，优先满足我司目前需求。这个框架具有以下特性：

使用原生导航组件
Android 使用了 Lifecycle 架构组件，解决了生命周期问题
以 iOS 的导航系统为参照，因为 iOS 的导航系统设计得比较完善，支持 push, pop, popTo, popToRoot, present, dismiss, replace, replaceToRoot 等操作
支持 statusBar, UINavigationBar(iOS), ToolBar(Android) 的全局样式配置以及局部调整
支持原生页面和 RN 页面互相跳转和传值
支持 vector icons

历时一个月的开发，该导航框架终于可以接入我司原有原生项目，又经过将近一个版本迭代的时间，伴随我司项目成长。目前 0.1.24 版本已能满足我司在原生应用的基础上嵌入一个 RN 业务模块的需求，该模块能与原生应用完美契合，导航体验一致。