什么是Navigation?
Navigation是ArkUI中的路由容器组件,一般作为首页的根容器,适用于模块内和跨模块的路由切换。支持一次开发,多端部署场景。
Navigation组件适用于模块内页面切换,通过组件级路由能力实现更加自然流畅的转场体验,是官方推荐的导航组件(相较于Router,Navigation的支持面更广,也更适合实现一多,所以建议使用Navigation)。
看到这里,很多iOS开发者可能比较熟悉,这个组件类似于iOS中的UINavigationController,可以用于根控制器实现页面的跳转和传值,同时可以实现系统或自定义标题栏、导航Item等,我们可以在Navigation中看到这些特性。
Navigation的组成
Navigation包含导航页(NavBar)和子页(NavDestination)。 导航页又包含以下三个部分:
- 标题栏(Titlebar,包含菜单栏menu):通过title属性设置标题。
- 内容区(Navigation子组件):默认首页显示导航内容(Navigation的子组件)或非首页显示(NavDestination的子组件),首页和非首页通过路由进行切换。
- 工具栏(Toolbar):通过toolbarConfiguration实现对工具栏的配置。
上图所示为单页面模式布局示意图,左边为导航页,右边为子页,可以通过路由转换实现页面跳转。
- 标题栏
- 菜单栏
- 工具栏
路由跳转
Navigation路由跳转相关操作是基于页面栈NavPathStack
提供的方法进行,每个Navigation都需要创建并传入一个NavPathStack
对象,用于管理页面。
NavPathStack
通过push()
、pop()
、remove()
等操作控制页面的入栈和出栈,从而完成页面的切换。
路由跳转的方式:
1. 跳转
- 通过页面的name去跳转,并可以携带参数;
this.pageStack.pushPath({ name: "PageOne", param: "PageOne Param" })
this.pageStack.pushPathByName("PageOne", "PageOne Param")
- 带返回回调的跳转,跳转时添加onPop回调,能在页面出栈时获取返回信息,并进行处理;
this.pageStack.pushPathByName('PageOne', "PageOne Param", (popInfo) => {
console.log('Pop page name is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result))
});
- 带错误码的跳转,跳转结束会触发异步回调,返回错误码信息
this.pageStack.pushDestinationByName('PageOne', "PageOne Param")
.catch((error: BusinessError) => {
console.error(`Push destination failed, error code = ${error.code}, error.message = ${error.message}.`);
}).then(() => {
console.error('Push destination succeed.');
});