HarmonyOS 组件导航模式下的共享元素转场

共享元素转场用于NavDestination之间切换，问题demo中Navigation组件内写入的Image不属于路由栈内元素，因此无法实现共享元素转场效果，可以尝试以下写法：

@Entry
@Component
struct Index {
  @Provide ('navPS') navPathStack: NavPathStack = new NavPathStack();
  aboutToAppear(): void {
    this.navPathStack.replacePath({name:'nextB'},false)
  }
  @Builder
  navPathMapBuilder(name: string) {
    if(name === 'nextB'){
      NextB()
    } else if(name === 'nextC'){
      NextC()
    }
  }
  build() {
    Navigation(this.navPathStack)
      .navDestination(this.navPathMapBuilder)
      .hideNavBar(true)
  }
}
@Component
struct NextB {
  @Consume ('navPS') navPathStack: NavPathStack
  build() {
    NavDestination() {
      Column() {
        Image($r('app.media.app_icon'))
          .width(80)
          .height(80)
          .geometryTransition('sharedId')
          .onClick(() => {
            animateTo({ duration: 1000 }, () => {
              this.navPathStack.pushPath({name :'nextC'},false)
            })
          })
      }
      .width('100%')
      .height('100%')
    }
    .title('设置')
  }
}
@Component
struct NextC {
  @Consume ('navPS') navPathStack: NavPathStack
  build() {
    NavDestination() {
      Column() {
        Image($r('app.media.app_icon'))
          .width(160)
          .height(160)
          .geometryTransition('sharedId')
          .onClick(() => {
            animateTo({ duration: 1000 }, () => {
              this.navPathStack.pop(false)
            })
          })
      }
      .width('100%')
      .height('100%')
    }
    .title('Page C')
    .onBackPressed(()=>{
      animateTo({ duration: 1000 }, () => {
        this.navPathStack.pop(false)
      })
      return true
    })
  }
}