簡介：通過不同實際場景的描述，供大家參考完成 Native 頁面的定制化開發。

很多 mPaaS Coder 在接入 H5 容器后都會對容器的導航欄進行深度定制，本文旨在通過不同實際場景的描述，供大家參考完成 Native 頁面的定制化開發。

歡迎關注 mPaaS 公眾號，下期推文，我們將為大家介紹 jsapi 下如何動態修改導航欄，敬請期待🤞🏻

Native 修改導航欄左側返回按鈕

（一）自定義 NBPluginBase 插件中修改

1.自定義原生 BarButtonItem

監聽 kNBEvent_Scene_NavigationItem_Left_Back_Create_Before，在此監聽事件中設置自定義 BarButtonItem

//監聽kNBEvent_Scene_NavigationItem_Left_Back_Create_Before，在此監聽事件中：UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; button.frame = CGRectMake(0, 0, 44, 44); button.backgroundColor = [UIColor whiteColor]; [button setTitle:@"取消" forState:UIControlStateNormal]; button.titleLabel.font = [UIFont systemFontOfSize:14.0]; [button setTitleColor:[UIColor blueColor] forState:UIControlStateNormal]; event.context.currentViewController.navigationItem.leftBarButtonItem.customView = button;

注：此方案自定義button，需要自行實現關閉頁面邏輯。

2.修改返回按鈕

監聽 kNBEvent_Scene_NavigationItem_Left_Back_Create_After，在此監聽事件中修改默認返回按鈕樣式，包括文案顏色、返回箭頭等，文案內容默認不可修改。

//監聽kNBEvent_Scene_NavigationItem_Left_Back_Create_After，在此監聽事件中： // 修改返回按鈕樣式 NSArray *leftBarButtonItems = event.context.currentViewController.navigationItem.leftBarButtonItems; if ([leftBarButtonItems count] == 1) {if (leftBarButtonItems[0] && [leftBarButtonItems[0] isKindOfClass:[AUBarButtonItem class]]) {//在默認返回按鈕基礎上，修改返回箭頭和文案顏色AUBarButtonItem *backItem = leftBarButtonItems[0];backItem.backButtonColor = [UIColor greenColor];backItem.titleColor = [UIColor orangeColor];// [UIColor colorFromHexString:@"#00ff00"];//隱藏、顯示返回箭頭backItem.hideBackButtonImage = NO;//backItem.backButtonTitle; 標題內容更改無效。// 隱藏返回文案：文案設置為透明，保留返回按鈕 s 點擊區域//backItem.titleColor = [UIColor clearColor];} }

（二）H5容器中自定義修改

1.方式一，在 viewWillAppear 獲取自定義啟動參數，根據參數自定義返回按鈕。

- (void)viewWillAppear:(BOOL)animated {[super viewWillAppear:animated];// 當前頁面的啟動參數NSDictionary *expandParams = self.psdScene.createParam.expandParams;NSLog(@"[mpaas] expandParams: %@", expandParams); }

獲取啟動參數后，依據自定義參數實現自定義按鈕。

// 修改默認返回按鈕文案顏色NSString *backButtonColorString = expandParams[@"backButtonColor"];if ([backButtonColorString isKindOfClass:[NSString class]] && [backButtonColorString length] > 0) {UIColor *backButtonColor = [UIColor colorFromHexString:backButtonColorString];NSArray *leftBarButtonItems = self.navigationItem.leftBarButtonItems;if ([leftBarButtonItems count] == 1) {if (leftBarButtonItems[0] && [leftBarButtonItems[0] isKindOfClass:[AUBarButtonItem class]]) {backItem.backButtonTitle = @"測試";// 返回按鈕titlebackItem.titleColor = backButtonColor;// 返回按鈕文本顏色backItem.backButtonColor = [UIColor blueColor];// 設置箭頭顏色backItem.hideBackButtonImage = NO;//隱藏返回按鈕圖片，提供給框架使用// 返回按鈕圖片 backItem.backButtonImage; 設置無效，只可隱藏or顯示}}}

2.方式二，可以在 viewWillAppear 自定義整個返回區域 AUBarButtonItem 按鈕、個數：

AUBarButtonItem *backItem = [AUBarButtonItem barButtonItemWithIconFontName:kICONFONT_BACK iconColor:[UIColor lightGrayColor] target:self action:@selector(custBack:)]; AUBarButtonItem *backItem = [AUBarButtonItem backBarButtonItemWithTitle:@"測試" backArrowColor:[UIColor redColor] target:self action:@selector(custBack:)]; backItem.customView.frame = CGRectMake(0, 0, 44, 44);AUBarButtonItem *closeItem = [AUBarButtonItem barButtonItemWithIconFontName:kICONFONT_SYSTEM_CANCEL_BOLD iconColor:[UIColor lightGrayColor] target:self action:@selector(custClose:)]; closeItem.customView.frame = CGRectMake(0, 0, 30, 44);self.navigationItem.leftBarButtonItems = @[backItem,closeItem];

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

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; button.frame = CGRectMake(0, 0, 40, 40); [button setTitle:@"我的" forState:UIControlStateNormal]; [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; [button setBackgroundColor: [UIColor whiteColor]]; button.titleLabel.font = [UIFont systemFontOfSize:14.0f]; AUBarButtonItem *backItem = [[AUBarButtonItem alloc] initWithCustomView:button]; //返回按鈕事件 - (void)custBack:(id)sender{NSLog(@"back -----");[self back]; } //關閉所有session - (void)custClose:(id)sender{NSLog(@"close ------");NSArray<NBSession *> *sessions = [[NBContext sharedContext] sessions];for (NBSession* session in sessions) {[[NBContext sharedContext] exitSession:session animated:YES];} }

Native 修改導航欄左側關閉按鈕

（一）在自定義 NBPluginBase 插件中關閉按鈕需自行創建

監聽 kNBEvent_Scene_NavigationItem_Left_Close_Create_Before，在此監聽事件中創建關閉按鈕。

//監聽kNBEvent_Scene_NavigationItem_Left_Close_Create_Before，在此監聽事件中： // 創建關閉按鈕 [event preventDefault]; NBNavigationItemLeftCloseEvent *itemEvent = (NBNavigationItemLeftCloseEvent *)event; UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; button.frame = CGRectMake(0, 0, 44, 44); button.backgroundColor = [UIColor whiteColor]; [button setTitle:@"關閉" forState:UIControlStateNormal]; [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; itemEvent.customView = button;

監聽kNBEvent_Scene_NavigationItem_Left_Close_Create_After，在此監聽事件中修改關閉按鈕樣式。

//監聽kNBEvent_Scene_NavigationItem_Left_Close_Create_After，在此監聽事件中： // 修改關閉按鈕樣式 [event preventDefault]; NBNavigationItemLeftCloseEvent *itemEvent = (NBNavigationItemLeftCloseEvent *)event; UIButton *closeButton = (UIButton *)itemEvent.customView; [closeButton setTitle:@"關閉" forState:UIControlStateNormal]; [closeButton setTitleColor:[UIColor greenColor] forState:UIControlStateNormal];

Native 修改導航欄標題

（一）在viewWillAppear 獲取自定義啟動參數，根據參數自定義標題

//打開H5離線包 NSString *appId = @"20190927";[[MPNebulaAdapterInterface shareInstance]startH5ViewControllerWithNebulaApp:@{@"appId":appId,@"defaultTitle":@"測試",@"readTitle":@"NO",@"titleColor":@"ff0000",@"titleFont":@"18.0"}];//啟動參數設置標題文案、顏色、大小;

這里的參數key值appId、defaultTitle、readTitle為框架默認不可修改，其余參數 key 值自定義。

- (void)viewWillAppear:(BOOL)animated {[super viewWillAppear:animated];// 當前頁面的啟動參數NSDictionary *expandParams = self.psdScene.createParam.expandParams;NSLog(@"[mpaas] expandParams: %@", expandParams);// 設置導航欄標題NSString *titleColorString = expandParams[@"titleColor"];NSString *titleFont = expandParams[@"titleFont"];if ([titleColorString isKindOfClass:[NSString class]] && [titleColorString length] > 0 && [titleFont length] > 0) {UIColor *titleColor = [UIColor colorFromHexString:titleColorString];id<NBNavigationTitleViewProtocol> titleView = self.navigationItem.titleView;[[titleView mainTitleLabel] setTextColor:titleColor];float font = [titleFont floatValue];[[titleView mainTitleLabel] setFont:[UIFont systemFontOfSize:font]];} }

Native 修改導航欄右側按鈕

（一）NBPluginBase 插件中自定義修改

1.在 NBPluginBase 中，

監聽 kNBEvent_Scene_NavigationItem_Right_Setting_Create_Before，在此監聽事件中創建導航欄右側按鈕。

//監聽kNBEvent_Scene_NavigationItem_Right_Setting_Create_Before，在此監聽事件中： NBNavigationItemRightSettingEvent *settingEvent = (id)event; settingEvent.adjustsWidthToFitText = YES; settingEvent.maxWidth = [UIScreen mainScreen].bounds.size.width / 4.0f; UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; button.frame = CGRectMake(0, 0, 33, 40); [button setTitle:@"設置" forState:UIControlStateNormal]; [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; [button setBackgroundColor: [UIColor whiteColor]]; settingEvent.customView = button; [event preventDefault];

2.在 NBPluginBase 中

監聽kNBEvent_Scene_NavigationItem_Right_Setting_Create_After，在此監聽事件中修改導航欄右側按鈕。

//監聽kNBEvent_Scene_NavigationItem_Right_Setting_Create_After，在此監聽事件中： NBNavigationItemRightSettingEvent *settingEvent = (id)event; settingEvent.adjustsWidthToFitText = YES; settingEvent.maxWidth = [UIScreen mainScreen].bounds.size.width / 4.0f; UIButton *button = settingEvent.customView; button.titleLabel.font = [UIFont systemFontOfSize:14.0f]; button.frame = CGRectMake(0, 0, 40, 40); [button setTitleColor:[UIColor redColor] forState:UIControlStateNormal]; [button setTitleColor:[UIColor blackColor] forState:UIControlStateHighlighted]; [button setBackgroundColor: [UIColor whiteColor]]; [event stopPropagation];//去掉默認按鈕圖片

注：

1. 在插件中自定義導航欄右側按鈕，必須要在打開H5容器的啟動參數中設置@{@"showOptionMenu": @"YES"} 否則設置右側按鈕無效。

2. 必須要在kNBEvent_Scene_NavigationItem_Right_Setting_Create_After監聽事件中實現[event stopPropagation];否則showOptionMenu按鈕的默認圖片沒有辦法去掉。

（二）H5 容器中自定義修改

1.在 viewWillAppear 獲取自定義啟動參數，根據參數自定義設置 AUBarButtonItem按鈕。

（1）圖片樣式：

AUBarButtonItem *rightItem1 = [[AUBarButtonItem alloc] initWithImage:image1 style:UIBarButtonItemStylePlain target:self action:@selector(rightBarItemPressed1)]; AUBarButtonItem *rightItem2 = [[AUBarButtonItem alloc] initWithImage:image2 style:UIBarButtonItemStylePlain target:self action:@selector(rightBarItemPressed2)]; //單個按鈕 self.navigationItem.rightBarButtonItem = rightItem1; //多個按鈕 self.navigationItem.rightBarButtonItems = @[rightItem1, rightItem2];

（2）文字樣式：

AUBarButtonItem *titleItem1 = [[AUBarButtonItem alloc]initWithTitle:@"按鈕" style:UIBarButtonItemStylePlain target:self action:@selector(rightBarItemPressed1)]; AUBarButtonItem *titleItem2 = [[AUBarButtonItem alloc]initWithTitle:@"右側" style:UIBarButtonItemStylePlain target:self action:@selector(rightBarItemPressed2)]; //單個按鈕 self.navigationItem.rightBarButtonItem = rightItem1; //多個按鈕 self.navigationItem.rightBarButtonItems = @[titleItem1, titleItem2];

2.如果要修改 BarButtonItem 的文字大小、顏色等深度定制參考以下代碼：

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; button.frame = CGRectMake(0, 0, 40, 40); [button setTitle:@"我的" forState:UIControlStateNormal]; [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; [button setBackgroundColor: [UIColor whiteColor]]; button.titleLabel.font = [UIFont systemFontOfSize:14.0f]; AUBarButtonItem *rightItem = [[AUBarButtonItem alloc] initWithCustomView:button];

Native 自定義導航欄

（一）隱藏原生導航欄

自定義導航欄，要先隱藏原生導航欄。

//隱藏容器類navBar self.options.showTitleBar = NO; //隱藏系統層navBar [self.navigationController setNavigationBarHidden:YES];

（二）創建 navBarView

創建 AUCustomNavigationBar 初始化方法必須要 navigationBarForCurrentVC: 否則按鈕設置無效。

賦值給 self.customNavigationBar 容器會自動適配H5頁面高度，否則需自行適配頁面。

//創建navBarView，必須要用此方法 AUCustomNavigationBar *navBar = [AUCustomNavigationBar navigationBarForCurrentVC:self]; [self.view addSubview:navBar]; //設置給容器VC self.customNavigationBar = navBar;

（三）自定義背景樣式

設置背景色、漸變色等，setNavigationBarBlurEffective 設置毛玻璃效果，支持更多樣式自選。

//設置背景顏色，漸變色可自行設置 navBar.backgroundColor = [UIColor lightGrayColor]; [navBar setNavigationBarBlurEffectiveWithStyle:UIBlurEffectStyleDark]; // 毛玻璃效果，更多樣式自選

（四）設置左側導航按鈕

1.設置左側導航按鈕方式一：

//導航左側按鈕 navBar.backButtonTitle = @"取消"; navBar.backTitleLabel.font = [UIFont systemFontOfSize:16.0]; navBar.backButtonTitleColor = [UIColor orangeColor]; navBar.backButtonImage = [UIImage imageNamed:@"back_button@2x"]; [navBar addSubview:navBar.leftItem];

2.設置左側導航按鈕，自行關聯事件方式二，與方式一沖突，兩者選其一。

//自行關聯事件方式，與上述屬性設置沖突。 //image和title兩者選其一 [navBar setNavigationBarLeftItemWithImage:[UIImage imageNamed:@"back_button@2x"]target:self action:@selector(leftItemImageClick)]; [navBar setNavigationBarLeftItemWithTitle:@"取消" target:self action:@selector(leftItemTitleClick)];

（五）設置導航欄標題

1.設置導航欄標題方式一:

//設置導航欄標題 navBar.title = @"標題"; navBar.titleColor = [UIColor redColor]; navBar.titleLabel.font = [UIFont systemFontOfSize:14.0];

2.設置導航欄標題，AUDoubleTitleView雙標題titleView方式二：

//設置雙標題titleView AUDoubleTitleView *titleView = [[AUDoubleTitleView alloc]initWithTitle:@"主標題" detailTitle:@"副標題"]; navBar.titleView = titleView; //這里使用了mPaaS下雙標題UI，也可自行實現titleView

（六）設置導航欄右側按鈕

1.單個右側按鈕

（1）設置單個按鈕方式一：

//設置導航右側按鈕 navBar.rightItemTitle = @"菜單"; navBar.rightItemTitleColor = [UIColor blackColor]; //image和title兩者選其一 navBar.rightItemImage = [UIImage imageNamed:@"rightTT@2x"];

（2）設置單個按鈕方式二：

//自行關聯事件方式 //image和title兩者選其一 [navBar setNavigationBarRightItemWithTitle:@"菜單" target:self action:@selector(rightItemTitleClick)]; [navBar setNavigationBarRightItemWithImage:[UIImage imageNamed:@"rightTT@2x"] target:self action:@selector(rightItemImageClick)];

2.深度自定義單、多個右側按鈕

深度自定義右側按鈕、文字、大小、圖片，自行關聯事件。

//深度自定義右側按鈕、文字、大小、圖片、關聯事件 AUButton *button = [AUButton buttonWithStyle:AUButtonStyleNone title:@"右一" target:self action:@selector(rightItemTitleClick)]; button.titleLabel.font = [UIFont systemFontOfSize:16.0]; [button setTitleColor:[UIColor redColor] forState:UIControlStateNormal];AUButton *button1 = [AUButton buttonWithStyle:AUButtonStyleNone]; [button1 setImage:[UIImage imageNamed:@"rightTT@2x"] forState:UIControlStateNormal]; navBar.rightItemList = @[button,button1];

本文作者：阿里云 mPaaS TAM 團隊（石鵬飛 榮陽）

E · N · D

---

點擊這里了解更多 mPaaS 詳情

原文鏈接：https://developer.aliyun.com/article/792497?

版權聲明：本文內容由阿里云實名注冊用戶自發貢獻，版權歸原作者所有，阿里云開發者社區不擁有其著作權，亦不承擔相應法律責任。具體規則請查看《阿里云開發者社區用戶服務協議》和《阿里云開發者社區知識產權保護指引》。如果您發現本社區中有涉嫌抄襲的內容，填寫侵權投訴表單進行舉報，一經查實，本社區將立刻刪除涉嫌侵權內容。

總結

以上是生活随笔為你收集整理的技术干货 ｜ Native 页面下如何实现导航栏的定制化开发？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。