1# XComponentNode
2
3提供XComponent节点XComponentNode，表示组件树中的[XComponent组件](arkui-ts/ts-basic-components-xcomponent.md#xcomponent)，用于[EGL](../native-lib/egl.md)/[OpenGLES](../native-lib/opengles.md)和媒体数据写入，并支持动态修改节点渲染类型。
4
5> **说明：** 从API version 12开始，该接口不再维护，推荐使用[XComponent类型typeNode](./js-apis-arkui-frameNode.md#xcomponent12)的方式实现。
6>
7> 本模块首批接口从API version 11开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
8>
9> 当前不支持在预览器中使用XComponentNode。
10
11## 导入模块
12
13```ts
14import { XComponentNode } from "@kit.ArkUI";
15```
16
17## XComponentNode
18
19### constructor
20
21constructor(uiContext: UIContext, options: RenderOptions, id: string, type: XComponentType, libraryName?: string)
22
23XComponentNode的构造函数。
24
25**系统能力：** SystemCapability.ArkUI.ArkUI.Full
26
27**参数：**
28
29| 参数名      | 类型                                                         | 必填 | 说明                                                         |
30| ----------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
31| uiContext   | [UIContext](js-apis-arkui-UIContext.md)                      | 是   | UI上下文，获取方式可参考[UIContext获取方法](./js-apis-arkui-node.md#uicontext获取方法)。 |
32| options     | [RenderOptions](./js-apis-arkui-builderNode.md#renderoptions) | 是   | XComponentNode的构造可选参数。                               |
33| id          | string                                                       | 是   | XComponent的唯一标识，支持最大的字符串长度128。详见[XComponent组件](arkui-ts/ts-basic-components-xcomponent.md#xcomponent)。 |
34| type        | [XComponentType](arkui-ts/ts-appendix-enums.md#xcomponenttype10) | 是   | 用于指定XComponent组件类型。详见[XComponent组件](arkui-ts/ts-basic-components-xcomponent.md#xcomponent)。 |
35| libraryName | string                                                       | 否   | Native层编译输出动态库名称。详见[XComponent组件](arkui-ts/ts-basic-components-xcomponent.md#xcomponent)。 |
36
37> **说明：**
38>
39> 需要显式指定[RenderOptions](./js-apis-arkui-builderNode.md#renderoptions)中的selfIdealSize，否则XComponentNode内容大小为空，不显示任何内容。
40
41### onCreate
42
43onCreate(event?: Object): void
44
45XComponentNode加载完成时触发该回调。
46
47**系统能力：** SystemCapability.ArkUI.ArkUI.Full
48
49**参数:**
50
51| 参数名 | 类型   | 必填 | 说明                                                         |
52| ------ | ------ | ---- | ------------------------------------------------------------ |
53| event  | Object | 否   | 获取XComponent实例对象的context，context上挂载的方法由开发者在c++层定义。 |
54
55### onDestroy
56
57onDestroy(): void
58
59XComponentNode销毁时触发该回调。
60
61**系统能力：** SystemCapability.ArkUI.ArkUI.Full
62
63### changeRenderType
64
65changeRenderType(type: NodeRenderType): boolean
66
67修改XComponentNode的渲染类型。
68
69**系统能力：** SystemCapability.ArkUI.ArkUI.Full
70
71**参数:**
72
73| 参数名 | 类型                                                     | 必填 | 说明             |
74| ------ | ------------------------------------------------------------ | ---- | ------------------ |
75| type   | [NodeRenderType](./js-apis-arkui-builderNode.md#noderendertype) | 是 | 需要修改的渲染类型。 |
76
77**返回值:**
78
79| 类型 | 描述                   |
80| ---- | ---------------------- |
81| boolean | 修改渲染类型是否成功。 |
82
83## 示例
84
85```ts
86import { NodeController, FrameNode, XComponentNode, NodeRenderType, UIContext} from '@kit.ArkUI'
87
88class XComponentNodeController extends NodeController {
89  private xComponentNode: MyXComponentNode | null = null;
90  private soName: string = "tetrahedron_napi" // 该 so 由开发者通过 NAPI 编写并生成
91
92  constructor() {
93    super();
94  }
95
96  makeNode(context: UIContext): FrameNode | null {
97    this.xComponentNode = new MyXComponentNode(context, {
98      selfIdealSize: { width: 200, height: 200 }
99    }, "xComponentId", XComponentType.SURFACE, this.soName);
100    return this.xComponentNode;
101  }
102
103  changeRenderType(renderType: NodeRenderType): void {
104    if (this.xComponentNode) {
105      this.xComponentNode.changeRenderType(renderType);
106    }
107  }
108}
109
110class MyXComponentNode extends XComponentNode {
111  onCreate(event: Object) {
112    // do something when XComponentNode has created
113  }
114
115  onDestroy() {
116    // do something when XComponentNode is destroying
117  }
118}
119
120@Entry
121@Component
122struct Index {
123  build() {
124    Row() {
125      Column() {
126        NodeContainer(new XComponentNodeController())
127      }
128      .width('100%')
129      .height('100%')
130    }
131    .height('100%')
132  }
133}
134```
135
136![XComponentNodeSample](figures/xcomponent_node.jpg)
137
138<!--Del-->
139> **说明：**
140>
141> 示例中的Native层编译输出动态库参考自[OpenGL三棱椎（API10）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/Native/NdkOpenGL)，生成完整示例需下载该工程后将cpp目录下所有文件拷贝至本工程cpp目录下。
142<!--DelEnd-->
143