HarmonyOS 鸿蒙Next中HdsNavDestination在API18、19上一片空白

状况

API18、19 使用HdsNavDestination组件的页面总是一片空白，不管是用系统路由表的Page2.ets，还是用navDestination属性的InPage，都是空白，但日志清晰打印了pathStack，说明路由上了。作为对照Page3.ets使用NavDestination组件，显示正常 API20以上就没这问题 没搞懂到底哪里出了问题？

API18 效果：

API20 效果:

API 18的日志：

I     [Page2] {"pathArray":[{"name":"Page2","index":0,"navDestinationId":"0"}],"isReplace":0,"type":"NavPathStack","disableAllAnimation":false,"animated":true,"nativeStack":{},"popArray":[]}
I     [Page3] {"pathArray":[{"name":"Page3","index":0,"navDestinationId":"1"}],"isReplace":0,"type":"NavPathStack","disableAllAnimation":false,"animated":true,"nativeStack":{},"popArray":[]}
I     [InPage] {"pathArray":[{"name":"InPage","index":0,"navDestinationId":"2"}],"isReplace":0,"type":"NavPathStack","disableAllAnimation":false,"animated":true,"nativeStack":{},"popArray":[]}
I     [Page2] {"pathArray":[{"name":"Page2","index":0,"navDestinationId":"3"}],"isReplace":0,"type":"NavPathStack","disableAllAnimation":false,"animated":true,"nativeStack":{},"popArray":[]}
I     [Page3] {"pathArray":[{"name":"Page3","index":0,"navDestinationId":"4"}],"isReplace":0,"type":"NavPathStack","disableAllAnimation":false,"animated":true,"nativeStack":{},"popArray":[]}
I     [InPage] {"pathArray":[{"name":"InPage","index":0,"navDestinationId":"5"}],"isReplace":0,"type":"NavPathStack","disableAllAnimation":false,"animated":true,"nativeStack":{},"popArray":[]}
I     [Page2] {"pathArray":[{"name":"Page2","index":0,"navDestinationId":"6"}],"isReplace":0,"type":"NavPathStack","disableAllAnimation":false,"animated":true,"nativeStack":{},"popArray":[]}
I     [Page3] {"pathArray":[{"name":"Page3","index":0,"navDestinationId":"7"}],"isReplace":0,"type":"NavPathStack","disableAllAnimation":false,"animated":true,"nativeStack":{},"popArray":[]}
I     [InPage] {"pathArray":[{"name":"InPage","index":0,"navDestinationId":"8"}],"isReplace":0,"type":"NavPathStack","disableAllAnimation":false,"animated":true,"nativeStack":{},"popArray":[]}

由于没有API18、19的实机设备，效果都是在模拟器和云调试上测试的，都出现了空白的状况。

源码

Index.ets

import { HdsNavDestination, HdsNavigation, HdsNavigationAttribute } from '@kit.UIDesignKit';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @Provide('mainNavStack') mainNavStack: NavPathStack = new NavPathStack();

  @Builder InPageBuilder(name: string, param: Object) {
    if (name === 'InPage') { InPage(); }
  }

  build() {
    HdsNavigation(this.mainNavStack){
      Column()
        .height(100)
        .width(200)
        .backgroundColor('#ffd22727')
      Button('Page2')
        .onClick(() => {
          this.mainNavStack.pushPath({
            name: 'Page2'
          })
        })
      Button('Page3')
        .onClick(() => {
          this.mainNavStack.pushPath({
            name: 'Page3'
          })
        })
      Button('InPage')
        .onClick(() => {
          this.mainNavStack.pushPath({
            name: 'InPage'
          })
        })
    }
    .navDestination(this.InPageBuilder)
  }
}

@Component struct InPage {
  @Consume('mainNavStack') mainNavStack: NavPathStack = new NavPathStack();
  build() {
    HdsNavDestination() {
      Column() {
        Text('this is InPage')
        Column()
          .height(100)
          .width(100)
          .backgroundColor('#ff00ff96')
        Text(JSON.stringify(this.mainNavStack) || '')
      }
    }
    .onReady(() => {
      console.info('[InPage]', JSON.stringify(this.mainNavStack))
    })
  }
}

Page2.ets

import { HdsNavDestination, HdsNavDestinationAttribute } from '@kit.UIDesignKit';

@Builder export function Page2Builder (){
  Page2();
}

@Component
export struct Page2 {
  mainNavStack: NavPathStack = new NavPathStack();

  build() {

    HdsNavDestination() {
      Button('is Nav')
      Column()
        .height(400)
        .width(400)
        .backgroundColor('#ff27cdff')
      Text(JSON.stringify(this.mainNavStack) || '')
    }
    .onReady((ctx: NavDestinationContext) => {
      try {
        this.mainNavStack = ctx.pathStack;
        console.info('[Page2]', JSON.stringify(ctx.pathStack))
      } catch (e) {
        console.error('[Page2]', JSON.stringify(e))
      }
    })
  }
}

Page3.ets

@Builder export function Page3Builder (){
  Page3();
}

@Component
export struct Page3 {
  mainNavStack: NavPathStack = new NavPathStack();
  build() {
    NavDestination(){
      Button('is Nav')
      Column()
        .height(400)
        .width(400)
        .backgroundColor('#ff27cdff')
      Text(JSON.stringify(this.mainNavStack) || '')
    }
    .onReady((ctx: NavDestinationContext) => {
      try {
        this.mainNavStack = ctx.pathStack;
        console.info('[Page3]', JSON.stringify(ctx.pathStack))
      } catch (e) {
        console.error('[Page3]', JSON.stringify(e))
      }
    })
  }
}