自定义导航栏_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

自 10.1.60 版本基线起，iOS 小程序支持对导航栏进行自定义，您可以对导航栏中的标题、背景、返回按钮、右侧的设置和关闭按钮进行自定义。本文将向您详细介绍关于自定义 iOS 小程序导航栏的方法。

自定义导航栏背景和标题

全局自定义导航栏背景和标题

如果您要全局自定义小程序所有页面默认导航栏背景和标题，则需要在 app.json 中修改 window 配置。

导航栏隐藏：您需要自定义 JSAPI 实现。
导航栏透明："transparentTitle": "always"。
导航栏渐变："transparentTitle": "auto"。
导航栏颜色："titleBarColor": "#f00"。
导航栏标题文案："defaultTitle": "Alert"。

导航栏标题颜色：在 H5 基类的 viewWillAppear 方法的 super 之中，修改当前页面 titleView 的样式。

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];   
    ...
    BOOL isTinyApp = [NBUtils isTinyAppWithSession:self.psdSession];
    if (isTinyApp) {
        id<NBNavigationTitleViewProtocol> titleView = self.navigationItem.titleView;
        [[titleView mainTitleLabel] setFont:[UIFont systemFontOfSize:16]];
        [[titleView mainTitleLabel] setTextColor:[UIColor redColor]];
    }
 }

导航栏标题图片："titleImage": "https://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png"。

导航栏标题位置：请参考以下代码进行实现。

- (NSDictionary *)nebulaCustomConfig
{
    NSString* leftConfig = @"{\"enable\":true,\"appIdBlacklist\":[],\"appIdWhitelist\":[\".*\"]}";
    return @{@"h5_tinyAppTitleViewAlignLeftConfig" : leftConfig };
}

自定义某一页面导航栏背景和标题

如果您要自定义小程序中某一页面的导航栏背景和标题，则需要在该页面的 .json 中配置。

导航栏隐藏：您需要自定义 JSAPI 实现。
导航栏透明："transparentTitle": "always"。
导航栏渐变："transparentTitle": "auto"。
导航栏颜色："titleBarColor": "#f00"。
导航栏标题文案："defaultTitle": "Alert"。
导航栏标题颜色：您需要自定义 JSAPI，在 JSAPI 中修改当前页面 titleView 的样式。

- (void)handler:(NSDictionary *)data context:(PSDContext *)context callback:(PSD JSAPI ResponseCallbackBlock)callback
{
    [super handler:data context:context callback:callback];

     // 可以通过data传递字体、颜色等  
    id<NBNavigationTitleViewProtocol> titleView = context.currentViewController.navigationItem.titleView;
    [[titleView mainTitleLabel] setFont:[UIFont systemFontOfSize:16]];
    [[titleView mainTitleLabel] setTextColor:[UIColor redColor]];
}

导航栏标题图片："titleImage": "https://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png"。

动态修改当前页面的导航栏背景和标题

如果您要动态修改当前页面的导航栏背景和标题，则需要调用 my.setNavigationBar 进行配置。

导航栏隐藏：您需要自定义 JSAPI 实现。
导航栏透明：不支持。
导航栏渐变：不支持。
导航栏颜色："backgroundColor": "#f00"。
导航栏标题文案："title": "新标题"。

导航栏标题颜色：您需要自定义 JSAPI，在 JSAPI 中修改当前页面 titleView 的样式。

- (void)handler:(NSDictionary *)data context:(PSDContext *)context callback:(PSD JSAPI ResponseCallbackBlock)callback
{
    [super handler:data context:context callback:callback];

     // 可以通过 data 传递字体、颜色等
    id<NBNavigationTitleViewProtocol> titleView = context.currentViewController.navigationItem.titleView;
    [[titleView mainTitleLabel] setFont:[UIFont systemFontOfSize:16]];
    [[titleView mainTitleLabel] setTextColor:[UIColor redColor]];
}

导航栏标题图片："image": "https://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png"。

自定义导航栏返回按钮

如果您要全局修改返回按钮样式，则需要在 H5 基类的 viewWillAppear 方法的 super 之中，修改当前页面 leftBarButtonItem 样式。可修改的样式包含以下内容，您可以参考下方代码段以获得更多指导。

修改返回箭头和文案颜色
修改返回箭头样式和文字内容
隐藏返回箭头

隐藏返回文案

// 修改左侧返回按钮样式
AUBarButtonItem *backItem = self.navigationItem.leftBarButtonItem;
if ([backItem isKindOfClass:[AUBarButtonItem class]]) {
    // 在默认返回按钮基础上，修改返回箭头和文案颜色
    backItem.backButtonColor = [UIColor greenColor];
    backItem.titleColor = [UIColor colorFromHexString:@"#00ff00"];

    // 修改返回箭头样式和文字内容
    // backItem.backButtonTitle = @"回退";
    // backItem.backButtonImage = [UIImage imageNamed:@"APCommonUI.bundle/add"];

    // 隐藏返回箭头
    // backItem.hideBackButtonImage = YES;

    // 隐藏返回文案：文案设置为透明，保留返回按钮的点击区域
    // backItem.titleColor = [UIColor clearColor];
}

导航栏右侧设置和关闭按钮

全局修改右侧按钮图片和颜色

如果您要修改右侧按钮图片和颜色，则需要引入头文件 #import <TinyappService/TASUtils.h> 并进行如下配置。

修改关闭按钮颜色：[TASUtils sharedInstance].customItemColor = [UIColor redColor]。
修改关闭按钮图片：[TASUtils sharedInstance].customCloseImage = [UIImage imageNamed:@"xx"]。
显示分享按钮：[TASUtils sharedInstance].shoulShowSettingMenu = YES。
修改分享按钮图片：[TASUtils sharedInstance].customSettingImage = [UIImage imageNamed:@"xx"]。
修改分享按钮颜色：[TASUtils sharedInstance].customItemColor = [UIColor redColor]。

全局修改右侧按钮样式

如果您要全局修改右侧按钮样式，则需要在 H5 基类的 viewwillAppear 中，重写当前页面的 rightBarButtonItem。

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];   
    ...
    BOOL isTinyApp = [NBUtils isTinyAppWithSession:self.psdSession];
    if (isTinyApp) {
        self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"关闭" style:UIBarButtonItemStylePlain target:self action:@selector(onClickClose)];
    }
 }

- (void)onClickClose
{
    [TASUtils exitTinyApplication:self.appId];
}