技術幹貨 ｜ 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