HarmonyOS TabContent页面生命周期不触发？

Question

TabContent页面生命周期不触发。

1. IDE官方模版创建出来的项目， entry/src/main/ets/pages/Index.ets里写了个tabs。

build() { 
   if (this.isLogin) { 
     MainTabs() 
   } else  { 
     SMSAuthPage() 
   } 
 }

2. MainTabs代码：

import { RoadMapPage as HomePage } from '@jlgl/lesson'; 
import { MinePage } from '@jlgl/mine' 
import { PurchasePage } from '@jlgl/purchase'; 
import { MainPage as SOETestPage} from '@jlgl/soe/src/main/ets/components/mainpage/MainPage' 
@Component 
export struct MainTabs { 
  private tab_name_home: string = '首页' 
  private tab_name_mine: string = '我的' 
  private tab_name_purchase: string = '购买' 
  @State selectedIndex: number = 0; 
  @Provide hideTabBars: boolean = false; 
  @Builder tabBuilder(title: string, index: number, selectedImag: Resource, normalImag: Resource) { 
    Column() { 
      Image(this.selectedIndex === index ? selectedImag : normalImag) 
        .objectFit(ImageFit.ScaleDown) 
        .size({width:40, height:40}) 
      Text(title) 
        .fontSize(12) 
        .fontColor(this.selectedIndex === index ? $r('app.color.theme_tab_highlighted') : $r('app.color.theme_tab_normal')) 
    } 
    .width('100%') 
    .height(60) 
    .justifyContent(FlexAlign.Center) 
  } 
  build() { 
    Tabs({barPosition: BarPosition.End}) { 
      TabContent() { 
        HomePage() 
      } 
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP]) 
      .tabBar(this.tabBuilder(this.tab_name_home, 0, $r('app.media.icon_tab_study_active_new'), $r('app.media.icon_tab_study_default_new'))) 
      TabContent() { 
        PurchasePage() 
      }.tabBar(this.tabBuilder(this.tab_name_purchase, 1, $r('app.media.icon_tab_purchase_active_new'), $r('app.media.icon_tab_purchase_default_new'))) 
      TabContent() { 
        MinePage() 
      }.tabBar(this.tabBuilder(this.tab_name_mine, 2, $r('app.media.icon_tab_user_active_new'), $r('app.media.icon_tab_user_default_new'))) 
      TabContent() { 
        SOETestPage() 
      }.tabBar(this.tabBuilder(this.tab_name_mine, 2, $r('app.media.icon_tab_user_active_new'), $r('app.media.icon_tab_user_default_new'))) 
    } 
    .scrollable(false) 
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP]) 
    .barHeight(this.hideTabBars ? 0 : 56) 
    .animationDuration(0) 
    .onChange((index: number) => { 
      console.info('change index ', index) 
      this.selectedIndex = index 
    }) 
  } 
}

3. HomePage跳转到二级页面再回来，生命周期函数不触发。

生命周期函数：

aboutToReuse(params: Record<string, ESObject>) { 
} 
aboutToAppear(): void { 
} 
onPageShow(): void { 
}

跳转函数：

router.pushNamedRoute({ 
   name: 'LessonDetailPage', 
   params: { 
     lessonId: params.get('id') 
   } 
 })

二级页面回退函数：

router.back()

Answer 1

1、请参考自定义组件的生命周期文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-custom-component-lifecycle-V5\#abouttoappear

2、可以结合组件可见区域变化事件使用。参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-component-visible-area-change-event-V5

1中的文档有表明生命周期函数调用的条件：

aboutToAppear：在创建自定义组件的新实例后，在执行其build()函数之前执行。子组件仅第一次会创建。

onPageShow：页面每次显示时触发一次，包括路由过程、应用进入前台等场景，仅@Entry装饰的自定义组件生效。