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