微信小程序如何自定义导航栏，怎么确定导航栏及状态栏的高度？导航栏被刘海、信号图标给覆盖了怎么办？

声明：本文为了演示效果，颜色采用的比较显眼，可根据实际情况修改颜色

问题描述

当我们在JSON中将navigationStyle设置成custom后，当前页面的顶部导航栏就需要我们制作了，但出现了一下几个问题：

1. 导航栏的高度该是多少？
2. 导航栏被刘海、信号图标给覆盖了，就像下面
   
   

分析

整个顶部导航栏部分实际上是分为两部分的，分别是状态栏和导航栏，所以需要对两部分都进行处理

解决方法

1. 导航栏高度该是多少？

安卓手机建议设置48px，iOS手机建议设置44px；

怎么获取当前是iOS还是安卓？

通过Apiwx.getSystemInfo()获取其中的system（操作系统及版本）字段，看其中是否包含iOS字符串
示例：

<view style="background-color: blue;height: {
       {
       navBarHeight}}px;text-align: center;color: #ffffff;line-height: {
       {
       navBarHeight}}px;">导航栏</view>
<!-- 这里的样式比较简单，自行丰富 -->

Page({
   
    data: {