HarmonyOS 首页组件生命周期问题

参考示例如下：

//index.ets
@Entry
@Component
struct NavigationExample {
  onPageShow(): void {
    this.isPageVisible = true
    console.log("--NavigationOnPageShow")
  }

  onPageHide(): void {
    this.isPageVisible = false
    console.log("--NavigationOnPageHide")
  }

  @State isPageVisible: boolean = false;
  @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack();

  @Builder
  PageMap(name: string) {
    if (name === "NavDestinationTitle1") {
      pageOneTmp()
    } else if (name === "NavDestinationTitle2") {
      pageTwoTmp()
    }
  }

  build() {
    Column() {
      Navigation(this.pageInfos) {
        TextInput({ placeholder: 'search...' })
          .width("90%")
          .height(40)
          .backgroundColor('#FFFFFF')
        Tabs() {
          TabContent() {
            SourceVideoPage({ isPageVisible: this.isPageVisible })
          }
          .tabBar('首页')

          TabContent() {
            Text('推荐的内容').fontSize(30)
          }
          .tabBar('推荐')
        }

      }
      .title("主标题")
      .mode(NavigationMode.Stack)
      .navDestination(this.PageMap)
      .onNavBarStateChange((isVisible: boolean) => {
        console.info('-->isVisible：' + isVisible)
        if (isVisible) {
          this.isPageVisible = true
        } else {
          this.isPageVisible = false
        }
      })
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
  }
}

// PageOne.ets
@Component
export struct pageOneTmp {
  @Consume('pageInfos') pageInfos: NavPathStack;
  private arr: number[] = [1, 2];

  build() {
    NavDestination() {
      Column() {
        Text("NavDestinationContent1")
        List({ space: 12 }) {
          ForEach(this.arr, (item: string) => {
            ListItem() {
              Text("NavRouter" + item)
                .width("100%")
                .height(72)
                .backgroundColor('#FFFFFF')
                .borderRadius(24)
                .fontSize(16)
                .fontWeight(500)
                .textAlign(TextAlign.Center)
                .onClick(() => {
                  this.pageInfos.pushPath({ name: "NavDestinationTitle" + item })
                })
            }
          }, (item: string): string => item)
        }
        .width("90%")
        .margin({ top: 12 })
      }.width('100%').height('100%')
    }
    .title("NavDestinationTitle1")
    .onBackPressed(() => {
      const popDestinationInfo = this.pageInfos.pop() // 弹出路由栈栈顶元素
      console.log('pop' + '返回值' + JSON.stringify(popDestinationInfo))
      return true
    })
    .onShown(() => {
      console.log("--pageOneTmpOnShown")
    })
    .onHidden(() => {
      console.log("--pageOneTmpOnHidden")
    })
  }
}

// PageTwo.ets
@Component
export struct pageTwoTmp {
  @Consume('pageInfos') pageInfos: NavPathStack;

  build() {
    NavDestination() {
      Column() {
        Text("NavDestinationContent2")
      }.width('100%').height('100%')
    }.title("NavDestinationTitle2")
    .onBackPressed(() => {
      const popDestinationInfo = this.pageInfos.pop() // 弹出路由栈栈顶元素
      console.log('pop' + '返回值' + JSON.stringify(popDestinationInfo))
      return true
    })
  }
}

@Component
export struct SourceVideoPage {
  @Prop @Watch('onVideoChange') isPageVisible: boolean;
  controller: VideoController = new VideoController();
  @Consume('pageInfos') pageInfos: NavPathStack;
  private arr: number[] = [1, 2];

  onVideoChange() {
    if (this.isPageVisible) {
      this.controller.start()
    } else {
      this.controller.pause()
    }
  }

  build() {
    Column() {
      Video({
        src: $rawfile('videoTest.mp4'),
        controller: this.controller
      })
        .height(220)
        .width('90%')
        .loop(true)
        .onPrepared((event) => {
          this.controller.start();
          console.info(`--video ${event.duration}`)
        })
        .onStart(() => {
          console.info(`--video start`)
        })
        .onPause(() => {
          console.info(`--video pause`)
        })
      List({ space: 12 }) {
        ForEach(this.arr, (item: string) => {
          ListItem() {
            Text("NavRouter" + item)
              .width("100%")
              .height(72)
              .backgroundColor('#FFFFFF')
              .borderRadius(24)
              .fontSize(16)
              .fontWeight(500)
              .textAlign(TextAlign.Center)
              .onClick(() => {
                this.pageInfos.pushPath({ name: "NavDestinationTitle" + item })
              })
          }
        }, (item: string): string => item)
      }
      .width("90%")
    }
    .height("100%")
    .width("100%")
  }
}