HarmonyOS Navigation跳转的组件生命周期

Navigation跳转的页面，onPageShow（），onPageHide（）生病周期方法没有调用。

HarmonyOS

zxjiu

2024-09-26 11:22:07

浏览

回答 2

待解决

回答 2

按赞同

按时间

鱼弦CTO

在HarmonyOS的ArkUI中，通过 Navigation 跳转页面时，确实需要注意生命周期方法的调用问题。与传统的页面生命周期（如 onCreate, onResume, onPause 等）不同，ArkUI中的生命周期方法主要包括 onInit、onReady、onShow、onHide 等。

### 页面生命周期方法

onInit: 在组件实例化时调用，一般用于初始化数据。
onReady: 在组件完成渲染并添加到DOM树后调用。
onShow: 在页面显示时调用，比如从后台切换到前台。
onHide: 在页面隐藏时调用，比如切换到后台或跳转到其他页面。

### 示例代码

以下是一个示例，展示了如何通过 Navigation 跳转页面，并在目标页面中使用生命周期方法：

#### HomePage.ets

@Entry
@Component
struct HomePage {
    build() {
        Column({ space: 20, alignItems: ItemAlign.Center }) {
            Button("Go to Details Page")
                .onClick(() => {
                    Navigation.navigateTo({
                        uri: 'pages/DetailsPage',
                        params: { userId: '12345' }
                    });
                })
        }.padding(20)
    }

    onInit() {
        console.info("HomePage onInit");
    }

    onReady() {
        console.info("HomePage onReady");
    }

    onShow() {
        console.info("HomePage onShow");
    }

    onHide() {
        console.info("HomePage onHide");
    }
}

#### DetailsPage.ets

@Entry
@Component
struct DetailsPage {
    @State private userId: string;

    build() {
        Column({ space: 20, alignItems: ItemAlign.Center }) {
            Text(`User ID: ${this.userId}`)
                .fontSize(25)

            Button("Go Back")
                .onClick(() => {
                    Navigation.back();
                })
        }.padding(20)
    }

    onInit() {
        this.userId = this.params.userId;
        console.info("DetailsPage onInit");
    }

    onReady() {
        console.info("DetailsPage onReady");
    }

    onShow() {
        console.info("DetailsPage onShow");
    }

    onHide() {
        console.info("DetailsPage onHide");
    }
}

### 注意事项

确保组件路径正确：在navigateTo 方法中，要确保uri 参数指向的组件路径正确，如'pages/DetailsPage'。
生命周期方法输出日志：在每个生命周期方法中添加console.info 日志，可以帮助你调试和确认方法是否被调用。

### 问题排查

如果发现 onShow 和 onHide 生命周期方法没有被调用，可以检查以下几项：

正确声明生命周期方法：确保生命周期方法名称拼写正确。
页面切换逻辑：确保页面确实进行了显示和隐藏操作，例如从一个页面跳转到另一个页面。
版本兼容性：确保使用的HarmonyOS SDK版本支持这些生命周期方法。

### 总结

通过上述方法，你可以在HarmonyOS的ArkUI中正确处理页面的生命周期事件。在进行页面跳转时，确保各个生命周期方法正确实现并调用，从而有效管理页面状态和数据。

2024-09-26 18:40:39

superinsect

使用navigation跳转的页面不会走onPageShow生命周期，onPageShow、onPageHide、onBackPress等生命周期回调函数，仅对@Entry装饰的自定义组件生效。

如果强行要将NavDestination设置@Entry，由于一个页面只能有一个@Entry，需要把NavDestination单独写在另一个文件里，添加@Entry再export使用。这是不推荐的做法。即使如此，Navigation跳转时，也不会执行这些对应的生命周期函数。NavDestination提供了onShown、onHidden、onBackPressed等属性可以设置对应的回调函数，可以通过这些属性设置请参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-navigation-transition-V5NavDestination定义的子页面，有Navigation作为入口，语义上不建议额外设置@Entry作为入口标记。

2024-09-26 18:06:21

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS Navigation跳转的组件生命周期

订阅鸿蒙技术特刊，精选内容抢先看