技术干货 ｜ Native 页面下如何实现导航栏的定制化开发？

很多 mPaaS Coder 在接入 H5 容器后都会对容器的导航栏进行深度定制，本文旨在通过不同实际场景的描述，供大家参考完成 Native 页面的定制化开发。

Native 修改导航栏左侧返回按钮

监听 kNBEvent_Scene_NavigationItem_Left_Back_Create_Before，在此监听事件中设置自定义 BarButtonItem

注：此方案自定义button，需要自行实现关闭页面逻辑。

监听 kNBEvent_Scene_NavigationItem_Left_Back_Create_After，在此监听事件中修改默认返回按钮样式，包括文案颜色、返回箭头等，文案内容默认不可修改。

获取启动参数后，依据自定义参数实现自定义按钮。

如果要修改 BarButtonItem 的文字大小、颜色等深度定制可以参考以下代码：

Native 修改导航栏左侧关闭按钮

监听 kNBEvent_Scene_NavigationItem_Left_Close_Create_Before，在此监听事件中创建关闭按钮。

监听kNBEvent_Scene_NavigationItem_Left_Close_Create_After，在此监听事件中修改关闭按钮样式。

Native 修改导航栏标题

这里的参数key值appId、defaultTitle、readTitle为框架默认不可修改，其余参数 key 值自定义。

Native 修改导航栏右侧按钮

监听 kNBEvent_Scene_NavigationItem_Right_Setting_Create_Before，在此监听事件中创建导航栏右侧按钮。

监听kNBEvent_Scene_NavigationItem_Right_Setting_Create_After，在此监听事件中修改导航栏右侧按钮。

注：

1. 在插件中自定义导航栏右侧按钮，必须要在打开H5容器的启动参数中设置@{@“showOptionMenu”: @“YES”} 否则设置右侧按钮无效。

2. 必须要在kNBEvent_Scene_NavigationItem_Right_Setting_Create_After监听事件中实现[event stopPropagation];否则showOptionMenu按钮的默认图片没有办法去掉。

（1）图片样式：

（2）文字样式：

Native 自定义导航栏

自定义导航栏，要先隐藏原生导航栏。

创建 AUCustomNavigationBar 初始化方法必须要 navigationBarForCurrentVC: 否则按钮设置无效。

赋值给 self.customNavigationBar 容器会自动适配H5页面高度，否则需自行适配页面。

设置背景色、渐变色等，setNavigationBarBlurEffective 设置毛玻璃效果，支持更多样式自选。

##（四）设置左侧导航按钮

（1）设置单个按钮方式一：

（2）设置单个按钮方式二：

深度自定义右侧按钮、文字、大小、图片，自行关联事件。

本文作者：阿里云 mPaaS TAM 团队（石鹏飞 荣阳）

E · N · D