写在前面的话

大家看到这个文章时一定会感觉这是在炒剩饭，社区中已经有那么多分享自定义导航适配的文章了，为什么我还要再写一个呢？
主要原因就是，社区中大部分的适配方案中给出的大小是不精确的，并不能完美适配各种场景。

社区中大部分文章给到的值是 iOS -> 44px , Android -> 48px

思路

正常来讲，iOS和Android下的胶囊按钮的位置以及大小都是相同且不变的，我们可以通过胶囊按钮的位置和大小再配合 wx.getSystemInfo 或者 wx.getSystemInfoSync 中得到的 statusBarHeight 来计算出导航栏的位置和大小。

小程序提供了一个获取菜单按钮（右上角胶囊按钮）的布局位置信息的API，可以通过这个API获取到胶囊按钮的位置信息，但是经过实际测试，这个接口目前存在BUG，得到的值经常是错误的（通过特殊手段可以偶尔拿到正确的值），这个接口目前是无法使用的，等待官方修复吧。

下面是我经过实际测试得到的准确数据：

真机和开发者工具模拟器上的胶囊按钮不一样

# iOS
	top 4px
	right 7px
	width 87px
	height 32px
   
# Android
	top 8px
	right 10px
	width 95px
	height 32px
    
# 开发者工具模拟器（iOS）
	top 6px
	right 10px
	width 87px
	height 32px
    
# 开发者工具模拟器（Android）
	top 8px
	right 10px
	width 87px
	height 32px

top 的值是从 statusBarHeight 作为原点开始计算的。

使用上面数据中胶囊按钮的高度加 top * 2 上再加上 statusBarHeight 的高度就可以得到整个导航栏的高度了。

为什么 top * 2 ？因为胶囊按钮是垂直居中在 title 那一栏中的，上下都要有边距。

扩展

通过胶囊按钮的 right 可以准确的算出自定义导航的 左边距。

通过胶囊按钮的 right + width 可以准确的算出自定义导航的 右边距 。

通过 wx.getSystemInfo 或者 wx.getSystemInfoSync 中得到的 windowWidth - 胶囊按钮的 right + width 可以准确的算出自定义导航的 width 。

再扩展

wx.getSystemInfo 或者 wx.getSystemInfoSync 中得到的 statusBarHeight 每个机型都不一样，刘海屏得到的数据也是准确的。

如果是自定义整个页面，iPhone X系列的刘海屏，底部要留 68px ，不要问我为什么！

代码片段

https://developers.weixin.qq.com/s/Q79g6kmo7w5J