HarmonyOS 如何捕捉自定义组件重新可见的时机

可以参考下onPageShow和onPageHide。

1、onPageShow：页面每次显示时触发一次，包括路由过程、应用进入前台等场景。

2、onPageHide：页面每次隐藏时触发一次，包括路由过程、应用进入后台等场景。

3、关于自定义组件生命周期的详细说明，可参考：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-page-custom-components-lifecycle-V5#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9B%91%E5%90%AC%E9%A1%B5%E9%9D%A2%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F

示例参考如下：

@Entry
@Component
struct TabBarStyleExample1 {
  @State message: string = "hello word"
  @State color: Color = Color.Black

  @Builder
  MyColum() {
    Column() {
      Text(this.message)
    }.width('100%').height('100%').backgroundColor(this.color)
  }

  build() {
    Column({ space: 5 }) {
      Text("底部页签样式")
      Column() {
        Tabs({ barPosition: BarPosition.End }) {
          TabContent() {
            this.MyColum()
          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Pink')).onWillShow(() => {
            this.message = "Pink"
            this.color = Color.Pink
            console.info("Pink will show")
          }).onWillHide(() => {
            console.info("Pink will hide")
          })

          TabContent() {
            this.MyColum()
          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Yellow')).onWillShow(() => {
            this.message = "Yellow"
            this.color = Color.Yellow
            console.info("Yellow will show")
          }).onWillHide(() => {
            console.info("Yellow will hide")
          })

          TabContent() {
            this.MyColum()
          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Blue')).onWillShow(() => {
            this.message = "Blue"
            this.color = Color.Blue
            console.info("Blue will show")
          }).onWillHide(() => {
            console.info("Blue will hide")
          })

          TabContent() {
            this.MyColum()
          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Green')).onWillShow(() => {
            this.message = "Green"
            this.color = Color.Green
            console.info("Green will show")
          }).onWillHide(() => {
            console.info("Green will hide")
          })
        }
        .vertical(false)
        .scrollable(true)
        .barMode(BarMode.Fixed)
        .onChange((index: number) => {
          console.info(index.toString())
        })
        .width('100%')
        .backgroundColor(0xF1F3F5)
      }.width('100%')
      .height(200)
    }
  }
}