导航栏选择
目前 CRN 支持三种导航栏:
- Native 原生导航栏
- RN 原生的 NavigationBar
- CRN 框架的 HeaderView
Native 导航栏 vs NavigationBar vs HeaderView
如何选择使用Native 导航栏
orNavigationBar
orHeaderView
使用 Native 导航栏的好处
- RN 页面挂了导航栏还在,用户可以通过导航栏返回上一个页面
- Native 相对 JS 有性能优势
使用 NavigationBar 的好处
- 在页面切换时导航栏会有动画效果
- 开发者不用以组件的形式嵌入到页面中
使用 HeaderView 的好处
- 可定制化程度高
- 每个页面独立,互不影响,可单独控制
- 可以动态刷新
到底使用哪个?
通过上面的对比,我们可以发现三个组件是各有优势的,开发者可以根据自己的业务场景自行选择用哪个。我总结了几个筛选规则,可供参考:
- 单页面,且头部只有返回箭头与标题的可以选择使用 Native 导航栏,其他场景请不要使用
- 导航栏需要动态刷新的请使用 HeaderView
- 导航栏中间区域需要显示自定义 View 的,请使用 HeaderView
- 同一个业务内页面间导航栏背景色或者显示/隐藏逻辑不一致的,,请使用 HeaderView
- 如果 Native 导航栏可以满足需求,请使用 Native 导航栏
- 如果 NavigationBar 可以满足需求,请使用 NavigationBar
CRN 导航栏发展方向
- Native 原生导航栏在 RN 里面几乎处于废弃阶段;
- NavigationBar 因为官方支持不给力可以发展性不大,目前会跟随官方的脚步继续维护,但是不会自行扩展功能;
- HeaderView 基本已经完善,后续会根据业务方的需求继续完善。