Navigation组件导航

Navigation

详情见官方文档

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V14/ts-basic-components-navigation-V14#navpathstack10

概念

1. Navigation组件是路由导航的根视图容器，一般作为Page页面的根容器使用
2. 其内部默认包含：标题栏，内容区，工具栏，其容器区默认首页显示
3. 导航内容（Navigation的子组件）或者非首页显示（NavDestination），首页与非首页之间用路由进行切换

Navigation组件设置

属性

• 支持通用属性以外还支持以下属性

title

• 设置NAvigation页面标题

•   title(value,options)
    value：页面标题
    option：标题栏选项
  

menus

• 设置页面右上角菜单，不设置时不显示菜单项

• 使用Array写法，竖屏最多支持3个，横屏支持5个，多余会被翻入自动生成的更多图标中

•   menus(value)
    value：Array | CustomBuiler
  

titleMode

• 设置页面标题栏显示模式

• 默认值：NavigationTitleMode.Free

•   titleMode(value)
    value：NavigationTitleMode
    【NavigationTitleMode.Free  NavigationTitleMode.Mini  NavigationTitleMode.Full】
  

toolBar

• 设置工具栏内容，不设置时不显示工具栏。

• items均分底部工具栏，在每个均分内容区布局文本和图标，文本超长时，逐级缩小，缩小之后换行，最后截断。

• 推荐使用toolbarConfiguration代替

•   toolBar(value)
    value：object | CustomBuilder
    
    object(value，icon，action)
    value：string 工具栏单个选项的显示文本【必填】
    icon：工具栏单个选项的图标资源路径
    action：当前选项被选中的事件回调
  

toolbarConfiguration

• 设置工具栏内容，不设置时不显示工具栏。

•   toolbarConfiguration(value: Array | CustomBuilder, options?: NavigationToolbarOptions)
  

hideToolBar

• 设置是否隐藏工具栏

•   hideToolBar(vlaue: boolean)
  

hideToolBar 13+

• 设置是否隐藏工具栏，设置是否使用动画显隐工具栏。

•   hideToolBar(hide:boolean,animated:boolean)
    hide：boolean 是否隐藏工具
    animated：boolean 是否使用动画显隐工具栏
  

hideTitleBar

• 是否设置隐藏标题栏

•   hideTitleBar(value: boolean)
  

hideTitleBar 13+

• 设置是否隐藏标题栏，设置是否使用动画显隐标题栏。

•   hideTitleBar(hide: boolean, animated: boolean)
  

hideBackButton

• 设置是否隐藏标题栏中的返回键。返回键仅针对titleMode为NavigationTitleMode.Mini时才生效

•   hideBackButton(value: boolean)
  

mode

• 设置导航栏的显示模式，支持单栏（Stack）、分栏（Split）和自适应（Auto）。

•   node(value:NavigationMode)
    value: NavigationMode.Stack | NavigationMode.Split | NavigationMode.Auto
  

backButtonIcon

• 设置标题栏中返回键图标

•   backButtonIcon(value: string | PixelMap | Resource | SymbolGlyphModifier)
  

hideNavBar

• 设置是否隐藏导航栏。设置为true时，隐藏Navigation的导航栏，包括标题栏、内容区和工具栏。如果此时路由栈中存在NavDestination页面，则直接显示栈顶NavDestination页面，反之显示空白。

•   hideNavBar(value: boolean)
  

Navigation组件导航

NavPathStack

1. Navigation路由栈，允许被继承12+。
2. 开发者可以在派生类中新增属性方法，也可以重写基类NavPathStack的方法。
3. 派生类对象可以替代基类NavPathStack对象使用。

NavPathStack方法

以下显示的是常见使用的方法

pushPath 12+

• 将info指定的NavDestionation页面信息入栈

•   pushPath(info: NavPathInfo, animated?: boolean): void
    info：NavPathInfo
    {
    name：string NavDesTination页面名称
    param：NavDesTination页面详细参数
    onpop：NavDestination页面触发pop时返回的回调。仅pop中设置result参数后触发
    animated：boolean 是否支持转场动画，默认true
    }
  

pushPathByNme 11+

• 将name指定的NavDestination页面信息入栈，传递的数据为param，添加onPop回调接收入栈页面出栈时的返回结果，并进行处理。

•   pushPathByName(name: string, param: Object, onPop: Callback, animated?: boolean): void
  

replacePath 12+

• 替换页面栈操作，具体根据options中指定不同的LaunchMode，有不同的行为

•   replacePath(info: NavPathInfo, options?: NavigationOptions): void
  

replacePathByName

• 将当前页面栈栈顶退出，将name指定的页面入栈。

•   placePathByName(name: string, param: Object, animated?: boolean): void
  

removeByIndexes

• 将页面栈内索引值在indexes中的NavDestination页面删除。

•   removeByIndexes(indexes: Array): number
  

removeByName

• 将页面栈内指定name的NavDestination页面删除。

•   removeByName(name: string): number
  

Navigation组件导航

路由栈的准备

• 在module.json5中module中导入profile目录下的自定义的router_map.json文件
  

• 在profile目录下自定义router_map.json文件，并设置对应路由信息

  

Navigation

• 创建NavPathStack路由栈
• 将路由栈作为Navigation参数
• 

NavDestionation

• 建立该路由信息对应的组件（NavDestionation）

  • 创建function函数（名称与路由中的必须保持一致）
  • 创建路由栈NavPathStack，调用路由栈中的方法进行组件路由
  • onReady：NavDestination 生命周期的一个关键节点，触发时机在页面完成布局和渲染之后，在构建子组件页面之前。此时，页面组件已完全加载并准备好与用户交互。在此阶段执行操作（如更新路由栈）可以避免因页面未完全初始化而导致的潜在问题（如状态不一致或空指针异常）。
  • 将NavDestionationContext存入到NavPathStack中

  

Navigation路由拦截

• NavPathStack提供了setInterception方法，用于设置Navigation页面跳转拦截回调。该方法需要传入一个NavigationInterception对象，该对象包含三个回调函数
  1. willshow：页面跳转前回调，允许操作栈，在当前跳转生效
  2. didShow：页面跳转后回调，在该回调中操作栈会在下一次跳转生效
  3. modeChange：Navigation单双栏显示状态发生变更时触发该回调
• 可以利用在willShow回调中通过修改路由栈来实现路由拦截重定向的能力

代码

    Button('点击跳转two_page')
      .onClick(() => {
        this.pageInfo.pushPath({
          name: 'two_page'
        })
        // Interception：拦截
        this.pageInfo.setInterception({
          willShow: (from: NavDestinationContext | "navBar", to: NavDestinationContext | "navBar",
            operation: NavigationOperation, animated: boolean) => {
            // 判断目标栏是否是主页
            if (typeof to === "string") {
              console.log(`<< string`)
              console.log("target page is navigation home page.");
              return;
            }
            // 将跳转到PageTwo的路由重定向到PageOne
            let target: NavDestinationContext = to as NavDestinationContext;
            if (target.pathInfo.name === 'two_page') {
              console.log(`zzx ${target.pathInfo.name}`)
              target.pathStack.pop();
              // target.pathStack.pushPathByName('three_page', null);
              target.pathStack.pushPath({
                name: 'three_page'
              })
            } else {
              console.log(`zz ${JSON.stringify(`${this.pageInfo.getAllPathName()}`)}`)
              this.pageInfo.pushPath({ name: 'three_page' })
            }
          }
        })
      })