正文
为了让 ReactNative 应用更具原生质感，我们为 ReactNative 撸了一个原生导航库
react-native-navigation-hybrid
，以下简称 HBD 。距发布 0.1.0 一个多月后，现在发布 0.2.0 版本。这个版本我们支持 tabs、drawer, 支持从 react 侧启动应用。
|
Android
|
iOS
|
![]()
|
![]()
|
我们用
Reading
这个项目来为大家演示使用
react-navigation
和 HBD 的那些细小的差别。
使用 HBD 的 Reading 源码
在此。
源码并没有改动任何业务流程，没有触碰业务相关的代码，只是用 HBD 取代了 react-navigation，并修改了相关代码。大家可以从最后一个 commit 中看到作了哪些改动。
先来看闪屏, 左边是使用 react-navigation 的效果，右边是使用 HBD 的效果
|
react-navigation
|
react-native-navigation-hybrid
|
![]()
|
![]()
|
左边在重置根视图的时候有左右切屏的效果，而右边则是直接替换根视图，比较自然些。
再来看主体内容，同样，左边是使用 react-navigation 的效果，右边是使用 HBD 的效果
|
react-navigation
|
react-native-navigation-hybrid
|
![]()
|
![]()
|
react-navigation 做得确实好，效果和原生就只差那么一点了。仔细比较，Android 主要有以下区别：
-
左边 topBar 的右按钮比较小，右边 topBar 的右按钮大小正是所期待的，并且有原生的按压效果
-
左边 topBar 的返回按钮的按压效果是自定义的，右边 topBar 的返回按钮的按压效果是原生的
-
左边 bottomBar 的高度是 64，右边 bottomBar 的高度是 56
-
左边 bottomBarItem 没有按压效果，右边有很酷波浪效果
再来看看 ios 的效果对比，左边是使用 react-navigation 的效果，右边是使用 HBD 的效果
|
react-navigation
|
react-native-navigation-hybrid
|
![]()
|
![]()
|
iOS 的主要区别主要有：
-
左边状态栏的颜色是黑色，右边状态栏的颜色和标题保持一致
-
左边 topBar 的右侧按钮比较小，且按压时有不太协调的透明背景，右边 topBar 的右侧按钮大小符合原生规范，且按压效果是原生的
-
手势返回时，原生的效果要优于卡片式的效果
总的来说，差别比较小。如果项目是纯 RN 的或者不熟悉原生开发，使用 react-navigation 即可。
但如果项目既有原生、也有 RN，那么使用 HBD , 会使得原生页面和 RN 页面完美契合，即使是在同一个导航栈 (UINavigationController) 内。
说下 HBD 的源码吧。react 侧的代码非常简单，只有 5 个 js 文件，平均每个文件不到 50 行代码（含空行和注释）, iOS 侧的代码有 13 个 m 文件，平均每个文件不到 150 行代码，Android 侧主项目源码也差不多是这样。
