共计 11404 个字符，预计需要花费 29 分钟才能阅读完成。
很多 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 = @"测试";// 返回按钮 title
backItem.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 详情
正文完