Question
Why is the navigation bar displayed instead of exiting the page where Navigation is located when NavPathStack clears the page stack or the back button is clicked?
Solution
The hideNavBar attribute of the Navigation component is set to false by default. When the pop of the route stack is called, it returns to the NavBar. By default, since hideNavBar is set to false, calling pop() will cause the system to prioritize displaying the navigation bar inherent to the Navigation component rather than completely exiting the page stack.
You can hide the navigation bar or override the back button to not return to the navigation bar.
@Entry
@Component
struct NavPathStackExitsTheNavigationPage {
@Provide('pathInfos') pathInfos: NavPathStack = new NavPathStack();
@Builder
myRouter(name: string) {
if (name === 'PageOne') {
PageOne()
}
}
aboutToAppear(): void {
this.pathInfos.pushPath({ name: 'PageOne' });
}
build() {
Navigation(this.pathInfos) {
Column() {
Button('Jump to PageOne')
.width('100%')
.borderRadius(20)
.margin({ bottom: 16 })
.backgroundColor('#0A59F7')
.onClick(() => {
this.pathInfos.pushPath({ name: 'PageOne' });
})
}
.width('100%')
.height('100%')
.padding({
left: 16,
right: 16
})
.justifyContent(FlexAlign.End)
.alignItems(HorizontalAlign.Center)
}
.width('100%')
.mode(NavigationMode.Auto)
.title('title')
.titleMode(NavigationTitleMode.Mini)
.navDestination(this.myRouter)
.hideBackButton(true)
.hideNavBar(true) // Set the Navigation property's hideNavBar to true.
}
}
@Component
export struct PageOne {
@Consume('pathInfos') pathInfos: NavPathStack;
build() {
NavDestination() {
Column() {
Text('PageOne')
.width('100%')
.fontSize(20)
.fontColor(0x333333)
.textAlign(TextAlign.Center)
}
.size({ width: '100%', height: '100%' })
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center)
}
.title('PageOne')
.onBackPressed(() => {
this.getUIContext().getRouter().back(); // Override the return button logic to exit the navigation page.
return true;
})
}
}