技术干货 | Native 页面下如何实现导航栏的定制化开发?
简介: 通过不同实际场景的描述,供大家参考完成 Native 页面的定制化开发。
很多 mPaaS Coder 在接入 H5 容器后都会对容器的导航栏进行深度定制,本文旨在通过不同实际场景的描述,供大家参考完成 Native 页面的定制化开发。欢迎关注 mPaaS 公众号,下期推文,我们将为大家介绍 jsapi 下如何动态修改导航栏,敬请期待🤞🏻
Native 修改导航栏左侧返回按钮
(一)自定义 NBPluginBase 插件中修改
1.自定义原生 BarButtonItem
监听 kNBEvent_Scene_NavigationItem_Left_Back_Create_Before,在此监听事件中设置自定义 BarButtonItem
注:此方案自定义button,需要自行实现关闭页面逻辑。
2.修改返回按钮
监听 kNBEvent_Scene_NavigationItem_Left_Back_Create_After,在此监听事件中修改默认返回按钮样式,包括文案颜色、返回箭头等,文案内容默认不可修改。
(二)H5容器中自定义修改
1.方式一,在 viewWillAppear 获取自定义启动参数,根据参数自定义返回按钮。
获取启动参数后,依据自定义参数实现自定义按钮。
2.方式二,可以在 viewWillAppear 自定义整个返回区域 AUBarButtonItem 按钮、个数:
如果要修改 BarButtonItem 的文字大小、颜色等深度定制可以参考以下代码:
Native 修改导航栏左侧关闭按钮
(一)在自定义 NBPluginBase 插件中关闭按钮需自行创建
监听 kNBEvent_Scene_NavigationItem_Left_Close_Create_Before,在此监听事件中创建关闭按钮。
监听kNBEvent_Scene_NavigationItem_Left_Close_Create_After,在此监听事件中修改关闭按钮样式。
Native 修改导航栏标题
(一)在viewWillAppear 获取自定义启动参数,根据参数自定义标题
这里的参数key值appId、defaultTitle、readTitle为框架默认不可修改,其余参数 key 值自定义。
Native 修改导航栏右侧按钮
(一)NBPluginBase 插件中自定义修改
1.在 NBPluginBase 中,
监听 kNBEvent_Scene_NavigationItem_Right_Setting_Create_Before,在此监听事件中创建导航栏右侧按钮。
2.在 NBPluginBase 中
监听kNBEvent_Scene_NavigationItem_Right_Setting_Create_After,在此监听事件中修改导航栏右侧按钮。
注:
1. 在插件中自定义导航栏右侧按钮,必须要在打开H5容器的启动参数中设置@{@"showOptionMenu": @"YES"} 否则设置右侧按钮无效。
2. 必须要在kNBEvent_Scene_NavigationItem_Right_Setting_Create_After监听事件中实现[event stopPropagation];否则showOptionMenu按钮的默认图片没有办法去掉。
(二)H5 容器中自定义修改
1.在 viewWillAppear 获取自定义启动参数,根据参数自定义设置 AUBarButtonItem按钮。
(1)图片样式:
(2)文字样式:
2.如果要修改 BarButtonItem 的文字大小、颜色等深度定制参考以下代码:
Native 自定义导航栏
(一)隐藏原生导航栏
自定义导航栏,要先隐藏原生导航栏。
(二)创建 navBarView
- 创建 AUCustomNavigationBar 初始化方法必须要 navigationBarForCurrentVC: 否则按钮设置无效。
- 赋值给 self.customNavigationBar 容器会自动适配H5页面高度,否则需自行适配页面。
(三)自定义背景样式
设置背景色、渐变色等,setNavigationBarBlurEffective 设置毛玻璃效果,支持更多样式自选。
(四)设置左侧导航按钮
1.设置左侧导航按钮方式一:
2.设置左侧导航按钮,自行关联事件方式二,与方式一冲突,两者选其一。
(五)设置导航栏标题
1.设置导航栏标题方式一:
2.设置导航栏标题,AUDoubleTitleView双标题titleView方式二:
(六)设置导航栏右侧按钮
1.单个右侧按钮
(1)设置单个按钮方式一:
(2)设置单个按钮方式二:
2.深度自定义单、多个右侧按钮
深度自定义右侧按钮、文字、大小、图片,自行关联事件。
本文作者:阿里云 mPaaS TAM 团队(石鹏飞 荣阳)
本文为阿里云原创内容,未经允许不得转载。