概述：

XComponent组件作为一种渲染组件，通常用于满足开发者较为复杂的自定义渲染需求，例如相机预览流的显示、游戏画面的渲染、自定义视频播放器等等。其中Native API是其核心内容！

其可通过指定其type字段来实现不同的功能，主要有两个“surface”和“component”字段可供选择。

1. “surface”类型，开发者可将相关数据传入XComponent单独拥有的“NativeWindow”来渲染画面。
2. “component”类型，主要用于实现动态加载显示内容的目的。
3. NativeWindow是本地平台化窗。例如， 通过NativeWindow提供的Native API接口申请图形Buffer，并将生产图形内容写入图形Buffer，最终提交Buffer到图形队列。媒体相关应用（视频、相机等）也可以将相关数据写入XComponent所提供的NativeWindow，从而呈现相应画面。

在ArkTS侧使用如下代码，即可用XComponent组件进行利用EGL/OpenGLES渲染的开发

XComponent({ id: 'xcomponentId1', type: 'surface', libraryname: 'nativerender' })
  .onLoad((context) => {})
  .onDestroy(() => {})
  

onLoad()事件

• 触发时刻：XComponent准备好surface后触发
• 参数context：其上面挂载了暴露在模块上的native方法，使用方法类似于利用 import context from “libnativerender.so” 直接加载模块后获得的context实例
• 时序：onLoad事件的触发和Surface相关，其和native侧的OnSurfaceCreated的时序如下图：
  

onDestroy()事件

• 触发时刻：XComponent组件被销毁时触发与一般ArkUI的组件销毁时机一致，其和native侧的OnSurfaceDestroyed的时序如下图；
  

媒体数据写入：

• XComponent所持有的NativeWindow符合“生产者-消费者”模型。Camera、AVPlayer等符合生产者设计的部件都可以将数据写入XComponent持有的NativeWindow并通过XComponent显示。