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

移动开发平台mPaaS

于 2021-09-28 16:35:51 发布

阅读量446

点赞数

CC 4.0 BY-SA版权

文章标签：前端移动开发 html5 native app

本文链接：https://blog.csdn.net/m0_47737908/article/details/120532336

本文介绍了在 Native App 中如何实现导航栏的深度定制，包括修改导航栏的左侧返回按钮、关闭按钮、标题和右侧按钮，以及如何自定义导航栏的背景样式。提供了在 NBPluginBase 插件中和 H5 容器中进行修改的方法，并给出了具体代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

公众号首图0926.jpg

很多 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