为什么需要自定义导航栏？

原生小程序导航栏虽然开箱即用，但在实际开发中常常遇到以下痛点：

• 设计风格受限：无法自由定制背景、字体颜色、高度，难以融入品牌设计
• 扩展能力弱：无法在导航栏区域增加搜索框、自定义按钮、动态效果等
• 无法实现沉浸式：标题栏与状态栏分离感强，缺少整体感
• 屏幕适配难：不同机型（刘海屏、挖孔屏、动态岛）的高度表现不一致

因此，自定义导航栏成为许多商业项目和小程序框架的标配。本文将手把手教你实现一套适配所有主流机型、易扩展、性能优良的自定义导航栏组件。

基础配置：开启自定义模式

在 app.json 中将 navigationStyle 设置为 custom：

1
2
3
4
5
6
7
8

{
  "window": {
    "navigationStyle": "custom",
    "navigationBarTextStyle": "black"  // 仅对页面内文本颜色有影响，导航栏已隐藏
  }
}

💡 小贴士：也可以单独为某个页面配置，在页面目录的 .json 文件中设置相同字段即可。

配置完成后，小程序所有页面将不再渲染原生导航栏，状态栏区域完全暴露，需要我们自己实现导航UI和内容区域的避让。