#鸿蒙通关秘籍#如何使用同层渲染在Web上实现原生组件的流畅体验？

要在Web上实现原生组件的流畅体验，可以采用同层渲染的方式。这种方式通过在Web页面上预留位置，然后使用NodeContainer进行渲染，可以提升性能和交互体验。

1. 使用Stack组件将NodeContainer和Web组件进行层叠，并开启同层渲染模式：

   build() {
       Stack() {
           NodeContainer(this.searchNodeController)
           Web({ src: $rawfile("nativeembed_view.html"), controller: this.browserTabController })
               .backgroundColor('#F1F3F5')
               .zoomAccess(false)
               .enableNativeEmbedMode(true)
       }
   }
   1.
   2.
   3.
   4.
   5.
   6.
   7.
   8.
   9.

   复制

2. 监听onNativeEmbedLifecycleChange事件，获取surfaceId并绑定到NodeContainer：

   .onNativeEmbedLifecycleChange((embed) => {
       if (embed.status === NativeEmbedStatus.CREATE) {
           this.searchNodeController.setRenderOption({
               surfaceId: embed.surfaceId as string,
               type: embed.info?.type as string,
               renderType: NodeRenderType.RENDER_TYPE_TEXTURE,
               embedId: embed.embedId as string,
               width: px2vp(embed.info?.width),
               height: px2vp(embed.info?.height)
           });
       }
       this.searchNodeController.rebuild();
   })
   1.
   2.
   3.
   4.
   5.
   6.
   7.
   8.
   9.
   10.
   11.
   12.
   13.

   复制