【HarmonyOS开发】ArkUI-X 跨平台框架（利用ArkTs开发Android&IOS）

发表于 2026-10-4 14:21:47

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

×

ArkUI-X 把 ArkUI 开发框架扩展到了多个操作系统平台，目前支持 OpenHarmony、HarmonyOS、Android、iOS，后续还会逐步加更多平台。开发者写一套主代码，就能构建出多平台都能跑、体验精致的高性能应用。本文先横向对比几款主流跨平台框架，再讲 ArkUI-X 的技术特点、环境搭建和目录结构，最后补一段开发中用到的 XComponent 绘制组件。

一、先看看主流跨平台框架有哪些

React Native

基于 JavaScript 和 React 的开源框架，由 Facebook 开发维护。用 JSX 语法把组件的布局和行为写成声明式代码，通过内置原生组件和模块访问设备能力，做出来的应用有原生用户体验。代码可以在多个平台共享重用，开发维护效率明显提高。

Flutter

Google 的开源框架，用 Dart 语言，语法现代，带强类型、异步编程和热重载。自带渲染引擎，能把 UI 性能做上去，也是 iOS、Android、Web 三端一套代码库。适合追求漂亮、响应式、接近原生观感的应用。

Xamarin

微软出品的跨平台移动应用框架，用 C# 和 .NET，共享代码库构建 iOS、Android、Windows 原生应用。通过 Xamarin.Essentials 访问相机、传感器这些常用设备功能，工具和组件库也挺全，能省不少开发时间。

Ionic

基于 Web 技术的开源框架，用 HTML、CSS、JavaScript 写应用，靠 WebView 在各平台运行，结合 Angular 和 Cordova 插件提供丰富的 UI 组件和原生能力访问。一套代码库能部署到 iOS、Android 和 Web。

NativeScript

开源跨平台框架，可以用 JavaScript、TypeScript 或者 Angular 构建原生应用，通过原生组件和 API 加内置 JavaScript 运行时，把代码转成本机代码执行，插件机制扩展能力，也支持 Angular、Vue.js、React 三种前端框架。

uni-app

以 Vue.js 为核心的开发框架，提供一套基于 Vue.js 的组件和 API，开发者用熟悉的方式写代码，编写一次经编译转换在不同平台生成对应原生应用。插件或内置 API 可以访问相机、定位、传感器等设备能力。

二、OpenHarmony 的跨平台方案 ArkUI-X

ArkUI-X 有三点设计值得留意：一是整体后端引擎用 C++ 写，保证多平台可移植性，把平台依赖压到最低，移植成本也跟着降下来；二是整体绘制走自渲染机制，既减少平台依赖，又让各平台的绘制效果更一致；三是抽象出平台适配层和平台桥接层，方便不同平台对接。

三、环境搭建

1. 下载 DevEco Studio

装 4.0 beta2 及以上版本，IDE 的下载入口在 OpenHarmony 官方文档的发布说明页面里，配套关系以官方文档为准。

2. 安装 ArkUI-X SDK

第一步装 OpenHarmony 的 API 10，第二步再装 ArkUI-X 对应的 SDK，两项都在 IDE 的组件管理里勾上就行。

3. 创建 ArkUI-X 项目

新建 → 导入 → 导入示例工程
基于示例 HelloWorld 工程做 ArkUI-X 开发：把 Harmony 换成 OpenHarmony，再选 ArkUI-X 下的示例工程
创建完成后工具会自动检查环境、装依赖，等它跑完

四、目录结构

编译完成后，把 .arkui-x 目录里的 Android / iOS 工程直接导入对应平台即可。工程结构大致是：

ArkUI-X应用工程
├── .arkui-x
│   ├── android    # Android 平台相关代码
│   └── ios        # iOS 平台相关代码
├── .hvigor
├── .idea
├── AppScope
├── entry
├── hvigor
├── oh_modules
├── build-profile.json5
├── hvigorfile.ts
├── local.properties
└── oh-package.json5

五、扩展：XComponent 动态加载与 EGL/OpenGLES 渲染

开发「扫一扫」时用到一个挺有意思的组件，这里记一笔。XComponent 是绘制类组件，通常用来满足比较复杂的自定义绘制需求，比如相机预览流画面、游戏画面渲染。通过指定 type 字段能实现不同能力，主要有 surface 和 component 两个取值。

SURFACE	用于 EGL/OpenGLES 和媒体数据写入，开发者定制的绘制内容单独展示到屏幕上
COMPONENT	XComponent 会变成容器组件，可在其中执行非 UI 逻辑以动态加载显示内容
TEXTURE	用于 EGL/OpenGLES 和媒体数据写入，绘制内容与 XComponent 组件内容合成后一起展示

需要注意的是，type 为 COMPONENT 时，XComponent 作为容器，子组件沿垂直方向布局：垂直方向对齐格式用 FlexAlign.Start，水平方向用 FlexAlign.Center。

@Builder
function addText(label: string): void {
  Text(label)
    .fontSize(40)
}

@Entry
@Component
struct Index {
  @State message: string = 'Hello XComponent'
  @State messageCommon: string = 'HelloWorld'
  build() {
    Row() {
      Column() {
        XComponent({ id: 'xcomponentId-container', type: 'component' }) {
          addText(this.message)
          Divider()
            .margin(4)
            .strokeWidth(2)
            .color('#F1F3F5')
            .width('80%')
          Column() {
            Text(this.messageCommon)
              .fontSize(30)
          }
        }
      }
      .width('100%')
    }
    .height('100%')
  }
}

这就是用 @Builder 的 addText 函数实现动态加载的写法。期待 ArkUI-X 后续能兼容更多平台，比如 Linux、Windows 那一类。

qidao123.com企服评测-应用市场编辑提示