鸿蒙中Navigation与自定义封装导航组件

在鸿蒙应用开发中，我们需要返回组件，所以在官方文档中有一个内置API，Navigation，下面我们就看看Navigation的官方介绍：

   Navigation组件一般作为页面的根容器，包括单页面、分栏和自适应三种显示模式。Navigation组件适用于模块内页面切换，一次开发，多端部署场景。通过组件级路由能力实现更加自然流畅的转场体验，并提供多种标题栏样式来呈现更好的标题和内容联动效果。一次开发，多端部署场景下，Navigation组件能够自动适配窗口显示大小，在窗口较大的场景下自动切换分栏展示效果。

设置标题名称和栏模式

标题栏在界面顶部，用于呈现界面名称和操作入口，Navigation组件通过 title 属性设置标题栏的名称，通过titleMode属性设置标题栏模式。实现结果还有代码如图所示：

 以上是官方API实现的，官方实现的总是固定的，而且得是根组件，我们需要不固定的和不是根组件的时候怎么办呢，接下来我会教大家如何自己封装一个属于自己的返回导航组件：

一、实现TitleBar组件

实现思路：

1. 基础的组件结构创建出来（以包含了全部UI元素为主）
2. 抽象标题参数( prop 自定义builder) 字符串类型的prop
3. 抽象控制回退键的开关 （布尔类型的prop）
4. 抽象回退键的回调函数

因为TitleBar这个组件需要在多个地方使用，所以我们建在common组件里面的Manage里面，然后在index里面统一导出使用

 代码也放下面方便大家使用：

@Component
 export  struct TitleBar {
  @Prop title:string=''
  @Prop showBack:boolean=true
  // 不能使用prop修饰，否则编辑器不报错，但是通不过编译器
  onBack=()=>{}
  build() {
    Stack({ alignContent:Alignment.Start}) {
      Row(){
        Text(this.title).fontSize(17)
      }
      .width('100%')
      .justifyContent(FlexAlign.Center)

      Image($r('app.media.arrow_left'))
        .width(22)
        .margin({
          left: 6
        })
        .visibility(this.showBack ? Visibility.Visible: Visibility.Hidden)
        .onClick(()=>{
          //使用上面的onback回调函数
          this.onBack && this.onBack()
        })
    }
    .width('100%')
    .height(56)
  }
}

 实现效果如下面所示：

使用前先import导入再使用：

      我用提前写好的代码演示一下效果，跟官方的不同我用的标题是居中的，返回是一个图片，在组件的点击事件里面加上回调函数，然后使用router路由back返回到上一级，这样就可以实现返回到上一页面。

实现结果如下图所示：

补充返回图片

 第一次创作，有大佬可以给提出意见，还有希望可以帮助到大家。