一、开发环境搭建

React Native 环境：

1.安装 React Native 0.72.5（适配鸿蒙的稳定版本）：

npx react-native@0.72.5 init MusicHarmonyApp --template react-native-template-harmony
```:ml-citation{ref="1,2" data="citationList"}  

2.添加鸿蒙依赖：

npm install @react-native-oh/react-native-harmony
```:ml-citation{ref="1,8" data="citationList"}  

二、项目配置与鸿蒙特性融合

1.工程结构调整

（1）在 src/main/js/components 下创建鸿蒙专属组件（如音频控制卡片）

（2）修改 metro.config.js，启用鸿蒙支持：

const { createHarmonyMetroConfig } = require('@react-native-oh/react-native-harmony/metro.config');
module.exports = mergeConfig(getDefaultConfig(__dirname), createHarmonyMetroConfig(...));
```:ml-citation{ref="8" data="citationList"}  

2.鸿蒙特性集成

（1）ArkUI-X 适配‌：使用华为转换工具将 RN 组件映射为 ArkUI 组件

（2）分布式能力‌：跨设备协同播放控制（示例代码）：

import { HarmonyModule } from '@react-native-oh/harmony';
HarmonyModule.enableDistributedControl();
```:ml-citation{ref="1" data="citationList"}  

（3）服务卡片‌：动态音乐卡片支持折叠屏适配（栅格断点布局）

三、音乐播放功能实现

1.音频库集成

（1）安装 React Native 音频库（如 react-native-track-player）：

npm install react-native-track-player
```:ml-citation{ref="5" data="citationList"}  

（2）初始化播放器（支持后台播放）：

import TrackPlayer from 'react-native-track-player';
TrackPlayer.setupPlayer().then(() => {
  TrackPlayer.add(playlist); // 加载音乐列表
});
```:ml-citation{ref="5" data="citationList"}  

2.核心功能开发

（1）播放控制‌：调用 play()、pause()、seek() 方法

（2）进度条与状态管理‌：结合 useState 和 useEffect 同步 UI 状态

（3）‌交互动效‌：手势滑动切换歌曲（结合鸿蒙动画引擎）：

gesture.onGestureEvent(event => {
  if (event.direction === Direction.Left) {
    animateTo({ duration: 300 }, () => this.skipNext()); 
  }
});
```:ml-citation{ref="7" data="citationList"}  

3.界面设计

（1）使用 ListContainer 展示歌单，Slider 组件实现进度条

（2）通知栏控制：通过 ServiceAbility 实现后台播放

四.编译与调试

   1.‌编译 RN 包

   2.真机测试