# XComponent

**Repository Path**: vrhub/XComponent

## Basic Information

- **Project Name**: XComponent
- **Description**: 基于XComponent组件调用Native API，实现图形渲染。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 5
- **Created**: 2025-06-16
- **Last Updated**: 2025-06-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Native XComponent

### Introduction

This codelab introduces how to use **XComponent** to call the NAPI to create an EGL/GLES environment, draw a square on the home page, and change the color of the square. The Native C++ template is used here.

As shown in the following figure, tap the Draw Rectangle button to render a square in the drawing area of **XComponent**. Tap the drawing area so that the square displays another color. Tap the Draw Rectangle button again so that the square is restored to the original color.

![native_xcomponent](screenshots/device/native_xcomponent.en.gif)

### Concepts

- EGL: an interface between Khronos rendering APIs (such as OpenGL ES and OpenVG) and the underlying native window system.
- XComponent: a component that can accept and display the EGL/OpenGL ES and media data input.

### Permissions

N/A

### How to Use

1. Tap Draw Rectangle to render a square in the drawing area. Tap the drawing area to render the square with another color. Tap Draw Rectangle again to restore the color.

### Constraints

1. The sample is only supported on Huawei phones with standard systems.

2. HarmonyOS: HarmonyOS 5.0.0 Release or later.

3. DevEco Studio: DevEco Studio 5.0.0 Release or later.

4. HarmonyOS SDK: DevEco Studio 5.0.0 Release SDK or later.