为了让 ReactNative 应用更具原生质感, 我们为 ReactNative 撸了一个原生导航库 react-native-navigation-hybrid, 以下简称 HBD 距发布 0.1.0 一个多月后, 现在发布 0.2.0 版本这个版本我们支持 tabsdrawer, 支持从 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 侧主项目源码也差不多是这样
iOS | Android |
---|---|
从上图可以看到, Android 和 iOS 的文件名几乎是一一对应的这是因为 Android 还有个子项目, 可以认为它是个 polyfill, 它使得 Android 向 iOS 对齐子项目的源码也不多, 可以单独在 Android 原生工程使用, 熟悉 iOS 开发的 Android 工程师应该会比较喜欢它
经过不断地重构之后, 代码变得清晰和简单, 希望本库能够为对 RN 的原生导航感兴趣的伙伴们提供些思路
react-native-navigation-hybrid 的源码和教程
来源: https://juejin.im/post/5a864acff265da4e7832a295