Taro 小程序 自定义导航栏

在小程序中，有的页面需求可能需要我们做一个自定义的导航栏， 今天就来踩一踩坑

首先需要在app.js 中给全局的导航栏隐藏，

1 // app.js
2 
3 window: {
4    navigationStyle: 'custom',
5 },
6 //  navigationStyle 接受两个参数 ['default', 'custom']: ['系统导航栏， 默认值', '隐藏系统导航栏']

这里隐藏掉默认的导航栏之后 可以通过自定义组件的形式，DIY 一个导航栏， 值得注意的是， 当隐藏系统导航栏后， 页面会直接顶到状态栏上， 不同机型的状高度可能不一致， 尤其是针对 苹果X 的刘海屏等 水滴屏， 需要做适配，

解决方法：  Taro.getSystemInfo  中 有个属性叫做  statusBarHeight ， 通过此方法即可获取手机状态栏的高度， 也可以在 未隐藏系统导航栏时 通过  getSystemInfo  中的  可视区域高度  screenHeight  - 窗口高度  windowHeight - 状态栏高度  statusBarHeight 的差值结果得出 系统导航栏的高度， 这里我通过仅拿苹果手机的不同机型进行测试得出 系统导航栏高