欢迎加入开源鸿蒙PC社区：
https://harmonypc.csdn.net/
atomgit仓库地址：https://atomgit.com/2401_83963238/hongmeng61fps60

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

一、项目概述

1.1 项目背景

HarmonyOS 6.1 引入了强大的动画引擎，支持 60fps 的流畅动画效果。本项目旨在演示如何在 HarmonyOS 应用中实现高性能的复杂动画效果，同时深度剖析在开发过程中遇到的各类 ArkTS 编译错误和运行时问题。

核心挑战：

  • ArkTS 语法约束严格，与传统 Web 开发有显著差异
  • UI 组件的属性和方法有限制，不能随意使用
  • 类型系统要求严格，禁止隐式类型推断
  • 生命周期管理和资源清理需要开发者主动处理

1.2 项目目标

  • ✅ 实现 60fps 的流畅动画效果（8种动画类型）
  • ✅ 演示多种动画类型的实现方式
  • ✅ 提供完整的 ArkTS 错误解决方案
  • ✅ 分享性能优化和最佳实践指导
  • ✅ 详细记录开发过程中遇到的所有问题

1.3 技术栈

技术版本说明
HarmonyOS6.1操作系统平台
ArkTS2.0+开发语言（TypeScript 子集）
ArkUI-UI 框架
方舟引擎-动画渲染引擎

二、动画类型实现

2.1 八种动画类型总览

序号动画类型描述实现方式刷新频率
1旋转动画彩色方块持续旋转rotate 属性16ms
2缩放动画椭圆脉冲缩放效果动态计算宽高20ms
3位移动画方块圆形轨迹移动translate 属性20ms
4透明度动画椭圆透明度渐变opacity 属性20ms
5颜色动画彩虹色循环变化HSL 颜色计算25ms
6波浪动画5个球体波浪效果相位偏移 + 透明度20ms
7粒子动画8个粒子垂直振动独立运动元素30ms
8形态动画矩形到圆形渐变borderRadius 变化20ms

2.2 动画效果详细说明

旋转动画

视觉效果： 一个 80×80 的彩色矩形持续旋转，360° 循环。

实现要点：

  • 使用 rotate({ z: 1, angle: this.rotationAngle }) 实现 Z 轴旋转
  • 每次定时器触发，角度增加 2°
  • 颜色随 colorHue 值变化，呈现彩虹效果

核心代码：

Rect()
  .width(80)
  .height(80)
  .fill(this.getColorFromHue(this.colorHue))
  .borderRadius(12)
  .rotate({ z: 1, angle: this.rotationAngle });
缩放动画

视觉效果： 一个椭圆在 0.7 倍到 1.3 倍之间脉冲缩放。

实现要点：

  • 使用正弦函数计算缩放值：1 + sin(θ) * 0.3
  • 缩放范围：0.7 到 1.3
  • 椭圆形状比矩形更具视觉美感

核心代码：

Ellipse()
  .width(80 * (1 + Math.sin(this.waveOffset * Math.PI / 180) * 0.3))
  .height(80 * (1 + Math.sin(this.waveOffset * Math.PI / 180) * 0.3))
  .fill(this.getColorFromHue((this.colorHue + 60) % 360));
位移动画

视觉效果： 一个矩形沿圆形轨迹移动。

实现要点：

  • X 方向：sin 函数实现水平位移
  • Y 方向：cos 函数实现垂直位移
  • 相位差 90°，形成圆形轨迹
  • 位移范围：-30 到 +30 像素

核心代码：

Rect()
  .width(60)
  .height(60)
  .fill(this.getColorFromHue((this.colorHue + 120) % 360))
  .borderRadius(8)
  .translate({ 
    x: Math.sin(this.waveOffset * Math.PI / 180) * 30, 
    y: Math.cos(this.waveOffset * Math.PI / 180) * 30 
  });
透明度动画

视觉效果： 一个椭圆的透明度在 0.0 到 1.0 之间循环变化。

实现要点：

  • 公式：0.3 + sin(θ) * 0.5 + 0.2
  • 确保透明度始终在有效范围内（0.0-1.0）

核心代码：

Ellipse()
  .width(80)
  .height(80)
  .fill(this.getColorFromHue((this.colorHue + 180) % 360))
  .opacity(0.3 + Math.sin(this.waveOffset * Math.PI / 180) * 0.5 + 0.2);
颜色动画

视觉效果： 一个椭圆的填充颜色持续变化，呈现完整的彩虹色循环。

实现要点：

  • 使用 HSL 颜色模型
  • 色相值从 0 到 360 循环
  • 饱和度和亮度固定，确保颜色鲜艳

核心代码：

Ellipse()
  .width(80)
  .height(80)
  .fill(this.getColorFromHue(this.colorHue));
波浪动画

视觉效果： 5 个椭圆排列成一行，每个的透明度不同，形成波浪效果。

实现要点：

  • 每个元素相位相差 30°
  • 使用正弦函数控制透明度
  • 颜色也随色相值变化

核心代码：

Row({ space: 5 }) {
  Ellipse()
    .width(10)
    .height(10)
    .fill(this.getColorFromHue((this.colorHue + this.waveOffset) % 360))
    .opacity(0.3 + Math.sin(this.waveOffset * Math.PI / 180) * 0.7);
  Ellipse()
    .width(10)
    .height(10)
    .fill(this.getColorFromHue((this.colorHue + this.waveOffset + 30) % 360))
    .opacity(0.3 + Math.sin((this.waveOffset + 30) * Math.PI / 180) * 0.7);
  // ... 更多元素
}
粒子动画

视觉效果： 4 个粒子在垂直方向上振动，相位依次错开。

实现要点：

  • 使用数组存储 8 个粒子的垂直位移
  • 每个粒子相位相差 45°
  • 位移范围：-50 到 +50 像素

核心代码：

Row({ space: 15 }) {
  Ellipse()
    .width(8)
    .height(8)
    .fill(this.getColorFromHue(this.colorHue))
    .translate({ x: 0, y: this.particlePositions[0] });
  Ellipse()
    .width(8)
    .height(8)
    .fill(this.getColorFromHue((this.colorHue + 45) % 360))
    .translate({ x: 0, y: this.particlePositions[1] });
  // ... 更多粒子
}
形态动画

视觉效果： 一个矩形的圆角在 20px 到 40px 之间循环变化，形成形态渐变效果。

实现要点：

  • 圆角从 20px 到 40px 动态变化
  • 形态在矩形和接近圆形之间切换
  • 结合颜色动画，呈现丰富的视觉效果

核心代码：

Rect()
  .width(70)
  .height(70)
  .fill(this.getColorFromHue((this.colorHue + 300) % 360))
  .borderRadius(20 + Math.sin(this.waveOffset * Math.PI / 180) * 20);

三、ArkTS 常见错误深度剖析

3.1 错误类型汇总表

序号错误类型错误信息严重程度发现阶段
1@Builder 中声明变量Only UI component syntax can be written here🔴 高编译时
2定时器未清理组件销毁后定时器仍在运行🔴 高运行时
3定时器类型未声明Implicit any type🔴 高编译时
4数组类型声明错误Array type declaration incomplete🟡 中编译时
5数学函数参数错误Math.sin() 返回值不正确🟡 中运行时
6颜色格式错误Invalid color format🟡 中运行时
7生命周期方法名错误方法未被调用🔴 高运行时
8状态变量计算复杂表达式过长难以维护🟢 低代码质量

3.2 错误一：@Builder 中声明变量（最常见）

问题分析：

这是开发过程中遇到的最常见错误。在 ArkTS 中，@Builder 装饰的方法只能包含 UI 组件语法，不能声明局部变量、调用非 UI 方法或使用条件语句。

错误代码：

// ❌ 错误：在 @Builder 中声明局部变量
@Builder
buildScaleAnimation() {
  let scaleValue: number = 1 + Math.sin(this.waveOffset * Math.PI / 180) * 0.3;  // 编译错误
  let color: string = this.getColorFromHue((this.colorHue + 60) % 360);  // 编译错误
  
  Column({ space: 10 }) {
    Stack({ alignContent: Alignment.Center }) {
      Ellipse()
        .width(80 * scaleValue)  // 使用变量
        .height(80 * scaleValue)
        .fill(color);
    }
  }
}

错误信息：

Error message: Only UI component syntax can be written here
This may be caused by: 
- Statements that are not component creation expressions
- Local variable declarations
- Control flow statements (if, for, while, etc.)

解决方案：

// ✅ 正确：直接内联表达式
@Builder
buildScaleAnimation() {
  Column({ space: 10 }) {
    Stack({ alignContent: Alignment.Center }) {
      Ellipse()
        .width(80 * (1 + Math.sin(this.waveOffset * Math.PI / 180) * 0.3))
        .height(80 * (1 + Math.sin(this.waveOffset * Math.PI / 180) * 0.3))
        .fill(this.getColorFromHue((this.colorHue + 60) % 360));
    }
  }
}

原理说明：

特性@Builder 方法普通方法
局部变量声明❌ 不允许✅ 允许
条件语句❌ 不允许✅ 允许
循环语句❌ 不允许✅ 允许
UI 组件✅ 只允许✅ 允许
非 UI 方法调用❌ 不允许✅ 允许

3.3 错误二：定时器未清理

问题分析：

如果在组件销毁时没有清理定时器，会导致内存泄漏、定时器继续运行消耗资源，甚至导致应用崩溃。

错误代码：

// ❌ 错误：没有清理定时器
@Entry
@Component
struct AnimationDemo {
  private timer: number = 0;
  
  aboutToAppear(): void {
    this.timer = setInterval(() => {
      this.rotationAngle = this.rotationAngle + 2;
    }, 16);
  }
  // ❌ 没有 aboutToDisappear 方法清理定时器
}

运行时问题：

  1. 内存泄漏：定时器回调持续执行，相关的闭包变量无法被垃圾回收
  2. 性能下降：多个页面切换后，定时器累积导致性能问题
  3. 状态混乱：旧页面的定时器继续更新已销毁组件的状态

解决方案：

// ✅ 正确：完整生命周期管理
@Entry
@Component
struct AnimationDemo {
  private animationTimer: number = 0;
  private waveTimer: number = 0;
  private particleTimer: number = 0;
  private colorTimer: number = 0;
  
  aboutToAppear(): void {
    this.startAllAnimations();
  }
  
  aboutToDisappear(): void {
    this.stopAllAnimations();
  }
  
  startAllAnimations(): void {
    this.animationTimer = setInterval(() => {
      if (this.isPlaying) {
        this.rotationAngle = this.rotationAngle + 2;
      }
    }, 16);
    
    this.waveTimer = setInterval(() => {
      if (this.isPlaying) {
        this.waveOffset = this.waveOffset + 1;
      }
    }, 20);
    
    // ... 更多定时器
  }
  
  stopAllAnimations(): void {
    if (this.animationTimer > 0) {
      clearInterval(this.animationTimer);
      this.animationTimer = 0;
    }
    if (this.waveTimer > 0) {
      clearInterval(this.waveTimer);
      this.waveTimer = 0;
    }
    if (this.particleTimer > 0) {
      clearInterval(this.particleTimer);
      this.particleTimer = 0;
    }
    if (this.colorTimer > 0) {
      clearInterval(this.colorTimer);
      this.colorTimer = 0;
    }
  }
}

3.4 错误三：定时器类型未声明

问题分析：

setInterval 的返回值需要显式声明为 number 类型，否则会触发隐式 any 类型错误。

错误代码：

// ❌ 错误：隐式 any 类型
private timer = setInterval(() => {}, 16);  // timer 的类型是 any

// 触发 ArkTS 编译错误：
// "Use explicit types instead of any, unknown"

解决方案：

// ✅ 正确：显式声明类型
private timer: number = 0;

aboutToAppear(): void {
  this.timer = setInterval(() => {
    // 动画逻辑
  }, 16);
}

3.5 错误四：数组类型声明错误

问题分析：

ArkTS 中数组类型声明必须使用 Array<T> 格式，不能使用 TypeScript 的简写形式。

错误代码：

// ❌ 错误：类型声明不完整
@State positions = [0, 0, 0, 0];  // 隐式 any[]
@State names: string[] = [];  // 不支持的语法

// 触发编译错误

解决方案：

// ✅ 正确：使用 Array<T> 格式
@State particlePositions: Array<number> = [0, 0, 0, 0, 0, 0, 0, 0];

// 初始化空数组也需要声明类型
let newPositions: Array<number> = [];

3.6 错误五：数学函数参数错误

问题分析：

Math.sin() 和 Math.cos() 接受的参数是弧度（radians），不是角度（degrees）。这是一个很容易犯的错误。

错误代码：

// ❌ 错误：直接传入角度值
let angle = 90;
let sinValue = Math.sin(angle);  // 返回 0.893996...，不是 1

console.log(sinValue);  // 0.89，而不是 1

数学原理：

  • 弧度 = 角度 × π / 180
  • 90° = 90 × π / 180 = π/2 ≈ 1.5708 弧度
  • sin(π/2) = 1

解决方案：

// ✅ 正确：角度转弧度
let angle: number = 90;
let radians: number = angle * Math.PI / 180;  // 1.5708...
let sinValue: number = Math.sin(radians);  // 返回 1

// 或者直接写
let sinValue: number = Math.sin(90 * Math.PI / 180);  // 返回 1

在动画中的应用：

// ❌ 错误
let scale = 1 + Math.sin(this.waveOffset) * 0.3;  // waveOffset 是角度

// ✅ 正确
let scale = 1 + Math.sin(this.waveOffset * Math.PI / 180) * 0.3;

3.7 错误六：颜色格式错误

问题分析：

ArkUI 支持的颜色格式有限，需要使用正确的格式。

支持的颜色格式：

格式示例支持情况
#RRGGBB#FF5733✅ 完全支持
#RGB#F53✅ 完全支持
rgb(r,g,b)rgb(255,87,51)❌ 不支持
rgba(r,g,b,a)rgba(255,87,51,0.5)❌ 不支持
预设颜色Color.Red✅ 完全支持
资源引用$r('app.color.xxx')✅ 完全支持

错误代码：

// ❌ 错误：使用 rgba 字符串
Text('文字').fontColor('rgba(255,255,255,0.5)');

// 触发编译错误

解决方案：

// ✅ 正确：使用 #RRGGBB 格式 + opacity 属性
Text('文字')
  .fontColor('#FFFFFF')
  .opacity(0.5);

// ✅ 或者使用 ARGB 格式（透明度 + RGB）
Text('文字').fontColor('#80FFFFFF');  // 50% 透明的白色

HSL 到 RGB 转换函数：

getColorFromHue(hue: number): string {
  let h: number = hue / 360;
  let s: number = 0.8;
  let l: number = 0.6;
  
  let r: number = 0;
  let g: number = 0;
  let b: number = 0;
  
  if (s === 0) {
    r = l;
    g = l;
    b = l;
  } else {
    let q: number = l < 0.5 ? l * (1 + s) : l + s - l * s;
    let p: number = 2 * l - q;
    r = this.hue2rgb(p, q, h + 1/3);
    g = this.hue2rgb(p, q, h);
    b = this.hue2rgb(p, q, h - 1/3);
  }
  
  // 转换为 16 进制字符串
  let rInt: number = Math.round(r * 255);
  let gInt: number = Math.round(g * 255);
  let bInt: number = Math.round(b * 255);
  
  return '#' + this.toHex(rInt) + this.toHex(gInt) + this.toHex(bInt);
}

hue2rgb(p: number, q: number, t: number): number {
  if (t < 0) { t = t + 1; }
  if (t > 1) { t = t - 1; }
  if (t < 1/6) { return p + (q - p) * 6 * t; }
  if (t < 1/2) { return q; }
  if (t < 2/3) { return p + (q - p) * (2/3 - t) * 6; }
  return p;
}

toHex(value: number): string {
  let hex: string = value.toString(16);
  if (hex.length === 1) {
    hex = '0' + hex;
  }
  return hex;
}

3.8 错误七：表达式过于复杂

问题分析：

由于 @Builder 中不能声明变量，所有计算都必须内联，导致表达式非常长，难以阅读和维护。

问题代码：

// ⚠️ 问题：表达式过长，难以理解
@Builder
buildScaleAnimation() {
  Ellipse()
    .width(80 * (1 + Math.sin(this.waveOffset * Math.PI / 180) * 0.3))
    .height(80 * (1 + Math.sin(this.waveOffset * Math.PI / 180) * 0.3))
    .fill(this.getColorFromHue((this.colorHue + 60) % 360));
}

改进方案：

// ✅ 改进：拆分到多个方法，但仍然内联
@Builder
buildScaleAnimation() {
  Column({ space: 10 }) {
    this.buildScaleEllipse();  // 拆分成单独的 Builder
    this.buildScaleLabel();    // 拆分成单独的 Builder
  }
}

@Builder
buildScaleEllipse() {
  Stack({ alignContent: Alignment.Center }) {
    Ellipse()
      .width(80 * (1 + Math.sin(this.waveOffset * Math.PI / 180) * 0.3))
      .height(80 * (1 + Math.sin(this.waveOffset * Math.PI / 180) * 0.3))
      .fill(this.getColorFromHue((this.colorHue + 60) % 360));
  }
  .width(100)
  .height(100);
}

@Builder
buildScaleLabel() {
  Column({ space: 10 }) {
    Text('缩放动画')
      .fontSize(12)
      .fontColor('rgba(255,255,255,0.7)');
    
    Text('×' + (1 + Math.sin(this.waveOffset * Math.PI / 180) * 0.3).toFixed(2))
      .fontSize(10)
      .fontColor(this.getColorFromHue((this.colorHue + 60) % 360));
  }
}

四、生命周期管理

4.1 正确的生命周期流程

┌─────────────────────────────────────────────────────────────────┐
│                    组件生命周期流程                              │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  1. aboutToAppear()                                           │
│     ↓                                                          │
│  2. 启动动画定时器                                              │
│     ↓                                                          │
│  3. 组件显示，用户交互                                          │
│     ↓                                                          │
│  4. 动画持续运行，定时器触发状态更新                             │
│     ↓                                                          │
│  5. aboutToDisappear()                                         │
│     ↓                                                          │
│  6. 清理所有定时器                                              │
│     ↓                                                          │
│  7. 组件销毁                                                    │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

4.2 生命周期方法对比

方法调用时机用途注意事项
aboutToAppear()组件显示前初始化数据、启动动画只调用一次
aboutToDisappear()组件销毁前清理资源、停止动画必须清理定时器
onPageShow()页面显示时刷新数据、恢复状态可多次调用
onPageHide()页面隐藏时保存状态、暂停动画可多次调用

4.3 状态管理

状态变量分类：

类型示例更新频率说明
动画控制isPlaying低用户操作时更新
动画参数rotationAngle高（16-30ms）定时器更新
配置参数colorHue中（25ms）定时器更新
数组数据particlePositions中（30ms）定时器更新

状态更新原则：

  1. 控制状态单独管理：暂停/播放按钮控制 isPlaying，定时器内检查
  2. 避免频繁更新：不同动画使用不同刷新频率
  3. 批量更新：粒子位置一次性更新整个数组

五、性能优化

5.1 定时器刷新频率策略

动画类型刷新频率帧率原因
旋转动画16ms60fps需要平滑旋转
波浪动画20ms50fps中等精度即可
粒子动画30ms33fps视觉容忍度较高
颜色动画25ms40fps颜色渐变不需要高频率

5.2 性能监控指标

指标目标值测量方法
帧率60 fps视觉观察
每帧耗时≤ 16.67ms性能分析工具
CPU 占用< 20%系统监控
内存占用< 50MB开发工具

5.3 优化建议

Do’s（应该做）：

// ✅ 使用 transform 属性（GPU 加速）
Ellipse().translate({ x: 100, y: 100 }).rotate({ angle: 45 });

// ✅ 使用 Stack 限制重绘区域
Stack() {
  // 只有 Stack 内的内容会重绘
}

// ✅ 及时清理定时器
aboutToDisappear() {
  clearInterval(this.timer);
}

// ✅ 使用条件检查避免无效更新
if (this.isPlaying) {
  this.rotationAngle = this.rotationAngle + 2;
}

Don’ts（不应该做）：

// ❌ 在动画循环中创建新对象
setInterval(() => {
  let obj = new SomeObject();  // 每次都创建，浪费资源
}, 16);

// ❌ 在动画循环中执行耗时操作
setInterval(() => {
  this.performHeavyCalculation();  // 会导致帧率下降
}, 16);

// ❌ 动画过程中改变布局属性
// ❌ 动画过程中改变组件层级

六、调试技巧

6.1 常见问题排查

问题可能原因解决方案
动画不运行定时器未启动检查 aboutToAppear() 是否被调用
动画卡顿刷新频率太高降低定时器间隔或优化计算逻辑
内存泄漏定时器未清理检查 aboutToDisappear()
颜色不变色相值未更新检查颜色计算函数
位置不对坐标系错误确认 Stack 的 alignContent 设置

6.2 调试代码示例

// 添加日志调试
aboutToAppear(): void {
  console.info('AnimationDemo: aboutToAppear called');
  this.startAllAnimations();
}

aboutToDisappear(): void {
  console.info('AnimationDemo: aboutToDisappear called');
  this.stopAllAnimations();
}

// 定时器内添加日志（临时调试）
setInterval(() => {
  if (this.isPlaying) {
    this.rotationAngle = this.rotationAngle + 2;
    console.info('Rotation:', this.rotationAngle);
  }
}, 16);

6.3 性能分析方法

  1. 帧率观察：肉眼观察动画是否流畅
  2. 控制台日志：输出关键变量的值
  3. DevEco Studio 性能分析器：查看 CPU 和内存使用
  4. 断点调试：在定时器回调中设置断点

七、总结

7.1 项目成果

本项目成功实现了 HarmonyOS 6.1 环境下的 60fps 流畅动画效果：

成果描述状态
8种动画类型旋转、缩放、位移、透明度、颜色、波浪、粒子、形态✅ 完成
60fps 流畅度稳定 60fps，无明显卡顿✅ 完成
生命周期管理完善的启动和清理机制✅ 完成
错误解决方案7种常见错误及解决方案✅ 完成
性能优化多定时器分离，按需刷新✅ 完成

7.2 关键经验

1. ArkTS 约束必须遵守：

  • @Builder 中不能声明变量
  • 不能使用 any 类型
  • 必须显式声明所有类型

2. 生命周期管理很重要：

  • aboutToAppear() 启动动画
  • aboutToDisappear() 清理资源
  • 避免内存泄漏

3. 数学计算要小心：

  • 角度转弧度：θ * π / 180
  • 颜色格式：#RRGGBB
  • 透明度范围：0.0-1.0

4. 性能优化持续进行：

  • 不同动画使用不同刷新频率
  • 避免在动画循环中执行耗时操作
  • 及时清理定时器

7.3 后续改进方向

  1. 添加更多动画类型：弹簧动画、弹性动画等
  2. 实现自定义缓动函数：提供更多预设的缓动曲线
  3. 增加手势交互：支持触摸、拖拽等手势操作
  4. 优化性能：探索更高效的渲染方式
  5. 完善文档：提供更详细的 API 文档和使用示例

八、参考资源

8.1 官方文档

  • HarmonyOS 开发者文档
  • ArkTS 开发指南
  • ArkUI 组件文档
  • 方舟引擎性能优化指南

8.2 相关文件

文件路径说明
动画演示页面entry/src/main/ets/pages/AnimationDemo.ets完整的动画实现代码
常见错误汇总docs/HarmonyOS_Common_Errors_Guide.md所有 ArkTS 错误的解决方案
沉浸式光感效果docs/HarmonyOS_Immersive_Effect_Guide.md光感效果实现指南

版本：v2.0
更新时间：2026年6月13日
适用版本：HarmonyOS 6.1 / ArkTS 2.0+
作者：HarmonyOS 开发团队

# harmonyos # 华为 # 鸿蒙
Logo
Harmony PC 开发者社区

赋能鸿蒙PC开发者，共建全场景原生生态，共享一次开发多端部署创新价值。

更多推荐

鸿蒙 PC 上可用的 AI Agent 工具汇总（持续更新）

本文总结了主流AI编程工具在鸿蒙PC平台的获取方式，涵盖通用类和编程类工具。开源工具占多数，包括OpenClaw、Hermes Agent等，主要通过Harmonybrew、npm或应用市场安装。部分工具如Claude Code新版需要Linux兼容方案运行，而OpenCode目前只有第三方移植版本。闭源工具如Anthropic的Claude Code和Tencent的CodeBuddy Code

avatar Harmony PC 开发者社区

鸿蒙 PC 开发 RN 跨平台应用完整体验｜从环境搭建到应用运行全流程实战

本文介绍了在鸿蒙PC上本地开发React Native应用的完整流程： 环境准备： 需准备鸿蒙PC（HarmonyOS 6.1.0+）和网络连接 安装DevEco Studio和配置HDC调试工具 设置必要的环境变量 项目创建： 使用React Native CLI初始化项目 安装鸿蒙适配依赖包 配置Metro打包工具支持鸿蒙平台 原生工程集成： 在DevEco Studio创建原生鸿蒙工程 配置

avatar Harmony PC 开发者社区

几个主流的环境管理器（rustup、uv、nvm、fnm）已经在鸿蒙 PC 上可用

在进行软件开发的过程中，开发者经常需要用到各种环境管理器来管理自己的开发环境：Rust 用 rustup，Python 用 uv，Node.js 用 nvm 或 fnm。这些环境管理器都没有官方适配鸿蒙，用户很难在鸿蒙 PC 上使用这些工具。现在，这四款环境管理器已经全部收录进 Harmonybrew 并完成了鸿蒙适配。本文介绍它们的使用方式以及适配原理。

avatar Harmony PC 开发者社区