React Native 鸿蒙跨端实践：音乐排行榜组件技术解析

组件化架构与跨端设计理念

React Native 的核心优势在于其组件化设计，使得一套代码能够在多平台（包括鸿蒙系统）上运行。本次解析的 MusicCharts 组件，展示了如何构建一个功能完整、交互流畅的音乐排行榜页面，并实现鸿蒙系统的无缝适配。

该组件采用了经典的移动端布局结构，从外到内依次为：

• SafeAreaView：作为根容器，确保内容在不同设备的安全区域内显示，自动适配刘海屏、状态栏和底部导航栏。在鸿蒙系统中，React Native 会调用系统 API 获取安全区域信息，确保内容不被遮挡。

• Header：页面头部，包含标题和图标，采用 Flexbox 布局实现水平排列。flexDirection: 'row' 和 justifyContent: 'space-between' 是跨端布局的常用组合，能够在不同屏幕尺寸下保持一致的视觉效果。

• ScrollView：主体内容滚动容器，处理长列表和复杂布局的滚动显示。在鸿蒙系统中，ScrollView 会映射为 ArkUI 的 scroll-view 组件，保持原生的滚动体验，包括惯性滚动和回弹效果。

• Section：功能分区，使用不同的背景色和边框样式区分不同功能模块。这种分区设计有助于提高页面的可读性和用户体验，在跨端开发中能够保持一致的视觉效果。

• 模态框（detailOverlay）：条件渲染的详情面板，用于显示歌曲的详细信息。模态框采用绝对定位覆盖整个屏幕，背景使用半透明黑色营造层次感。

状态管理与交互逻辑实现

Hooks 状态管理的跨端表现

组件使用 useState Hook 管理两个核心状态：

• detailVisible：控制详情模态框的显示/隐藏
• detailTitle：存储当前查看的歌曲标题

状态更新通过函数式调用实现，例如 setDetailVisible(true) 显示模态框，setDetailVisible(false) 隐藏模态框。这种状态管理方式简洁高效，适合中小型应用。

在鸿蒙系统中，React Native 的状态更新机制与原生应用类似，通过虚拟 DOM Diff 算法优化渲染性能，只更新变化的部分。这种基于状态的条件渲染是 React 组件的核心特性，在鸿蒙系统上同样高效运行。

交互函数实现

组件定义了多个交互函数，处理用户的各种操作：

• onPlay：点击播放按钮时调用，使用 Alert.alert 显示播放信息
• onMore：点击详情按钮时调用，更新状态显示模态框
• onCloseDetail：关闭详情模态框时调用，重置状态

这些交互函数通过 onPress 属性绑定到 TouchableOpacity 组件上，实现了用户操作的响应。在鸿蒙系统中，TouchableOpacity 会转换为具有点击效果的 ArkUI 组件，保持原生的触摸反馈。

Alert 弹窗的跨端适配

组件使用 Alert.alert 显示操作结果和提示信息。在 React Native 中，Alert 是一个跨平台的 API，会根据运行平台自动选择合适的弹窗样式。在鸿蒙系统中，React Native 会调用系统原生的弹窗 API，确保弹窗样式与系统一致，提供原生的用户体验。

样式系统与跨端视觉一致性

StyleSheet 的跨端优势

组件使用 StyleSheet.create 方法定义样式，将所有样式集中管理。这种方式的优势在于：

1. 性能优化：StyleSheet 在编译时会被处理，减少运行时计算，提高渲染性能。
2. 类型安全：TypeScript 会检查样式属性，减少运行时错误。
3. 模块化：便于样式复用和主题管理，适合跨端开发。

在鸿蒙系统中，React Native 的样式会被转换为 ArkUI 的样式规则，例如：

• flex: 1 转换为 flex-grow: 1
• borderRadius: 12 转换为 border-radius: 12px
• padding: 16 转换为 padding: 16px

主题色彩与视觉设计

组件采用了统一的主题色彩，主色调为黄色系（#fde68a），营造出活力、欢快的氛围，符合音乐应用的定位。背景色使用浅黄灰色（#fffefc），卡片背景使用纯白色，增强内容的可读性。

样式命名遵循了清晰的规范，例如：

• section：功能分区样式
• row：列表行样式
• actionBtn：操作按钮样式

这种命名方式便于维护和扩展，同时提高了代码的可读性。

资源管理与跨端适配

Base64 图标的跨端应用

组件使用 Base64 编码的图标，通过 ICONS_BASE64 对象集中管理。这种方式在跨端开发中具有明显优势：

1. 减少网络请求：Base64 图标直接嵌入代码，无需额外的网络请求，提高加载速度。
2. 避免资源适配问题：无需为不同平台（iOS、Android、鸿蒙）准备不同格式的图标资源。
3. 简化打包流程：无需处理不同平台的资源目录结构。

在鸿蒙系统中，React Native 会将 Base64 图标转换为系统支持的图片格式，确保正常显示。这种方式尤其适合小图标，能够显著提高应用的加载速度和性能。

表情符号的使用

组件还使用了表情符号作为辅助图标，例如 🏆 表示排行榜。这种方式简单高效，能够在不同平台上保持一致的显示效果，同时减少了图标资源的使用。

模态框设计与跨端实现

模态框的实现机制

组件包含一个条件渲染的模态框，用于显示歌曲的详细信息。模态框的显示/隐藏通过 detailVisible 状态控制，实现了流畅的交互体验。模态框采用绝对定位（position: 'absolute'）覆盖整个屏幕，背景使用半透明黑色（rgba(0,0,0,0.25)）营造层次感。

在鸿蒙系统中，绝对定位会转换为 ArkUI 的 position: 'fixed'，保持相同的视觉效果。模态框的内容采用 Flexbox 布局，分为头部、主体和底部三个部分，结构清晰，易于维护。

模态框的交互设计

模态框的头部包含标题和关闭按钮，主体展示详细信息，底部包含操作按钮。这种设计符合用户的使用习惯，能够提供良好的交互体验。在鸿蒙系统中，模态框的交互效果与原生应用保持一致，包括触摸外部区域关闭模态框等特性。

鸿蒙跨端开发的技术要点

组件映射与跨端实现

React Native 组件到鸿蒙 ArkUI 组件的映射是跨端适配的核心机制。以下是主要组件的映射关系：

React Native 组件	鸿蒙 ArkUI 组件	说明
SafeAreaView	Stack	安全区域容器
View	Div	基础容器组件
Text	Text	文本组件
ScrollView	ScrollView	滚动容器
TouchableOpacity	Button	可点击组件
Image	Image	图片组件
Alert	AlertDialog	弹窗组件

这种映射机制确保了 React Native 组件在鸿蒙系统上的原生表现，同时保持了开发体验的一致性。

平台特定代码处理

在跨端开发中，不可避免地会遇到平台特定的功能需求。React Native 提供了 Platform API 用于检测当前运行平台，从而执行不同的代码逻辑。例如：

import { Platform } from 'react-native';

if (Platform.OS === 'harmony') {
  // 鸿蒙平台特定代码
} else if (Platform.OS === 'ios') {
  // iOS平台特定代码
} else if (Platform.OS === 'android') {
  // Android平台特定代码
}

在实际开发中，应尽量减少平台特定代码，提高代码的可移植性。

性能优化建议

在鸿蒙系统上开发 React Native 应用时，需要关注应用的性能表现。以下是一些性能优化建议：

1. 合理使用 FlatList：对于长列表数据，优先使用 FlatList 组件，它实现了虚拟列表功能，能够高效渲染大量数据。
2. 组件缓存：使用 React.memo 优化组件渲染，减少不必要的重渲染。
3. 状态管理优化：避免在渲染函数中创建新对象或函数，减少组件重渲染次数。
4. 样式优化：使用 StyleSheet.create 定义样式，避免内联样式，提高渲染性能。
5. 图片优化：使用合适的图片格式和尺寸，避免大图加载导致的性能问题。

总结与展望

React Native 鸿蒙跨端开发为开发者提供了一种高效的解决方案，能够使用一套代码构建出在多平台上表现一致的高质量应用。本次解析的音乐排行榜组件，展示了如何利用 React Native 的组件化设计、状态管理和样式系统，构建一个功能完整、交互流畅的页面，并实现鸿蒙系统的无缝适配。

随着鸿蒙系统的不断发展和 React Native 对鸿蒙支持的完善，跨端开发将变得更加高效和便捷。未来，我们可以期待更多的 React Native 库和工具支持鸿蒙系统，进一步降低跨端开发的门槛。

对于开发者而言，掌握 React Native 鸿蒙跨端开发技术，不仅能够提高开发效率，还能够扩大应用的覆盖范围，满足不同平台用户的需求。在实际项目中，我们可以根据业务需求，灵活选择跨端开发方案，实现最佳的开发效率和用户体验。

通过合理的组件化设计、严格的类型定义和优化的状态管理，开发者可以使用一套代码构建出在 iOS、Android 和鸿蒙系统上表现一致的高质量应用，为用户提供统一的使用体验。

---

React Native 音乐排行榜页面实现与鸿蒙跨端适配深度解析

音乐排行榜作为音乐类应用的核心场景之一，其 React Native 实现聚焦于榜单数据结构化展示、轻量化交互反馈、沉浸式详情弹窗等核心能力，同时为鸿蒙（HarmonyOS）跨端迁移提供了低改造成本、高复用率的技术落地范式。本文将从 React Native 核心实现逻辑切入，结合鸿蒙 ArkTS 技术体系，剖析音乐榜单类业务页面的跨端开发思路与最佳实践。

一、React Native 核心实现逻辑拆解

1. 状态管理与交互逻辑设计

音乐排行榜页面的核心交互围绕“榜单浏览-歌曲详情查看-操作反馈”展开，该实现通过极简的 useState 状态管理构建了完整的交互闭环，完全贴合音乐类应用“轻量化、高反馈、沉浸式”的体验特性：

（1）核心状态设计

• detailVisible：布尔型状态作为歌曲详情弹窗的显隐开关，是移动端音乐榜单页面“列表浏览-深度详情”交互模式的核心控制变量。该状态仅在用户点击“详情”按钮时触发渲染，避免初始加载时的性能损耗，同时符合用户“先浏览榜单再查看歌曲详情”的操作习惯；
• detailTitle：字符串型状态动态绑定详情弹窗标题，实现不同歌曲与弹窗内容的精准关联，保证用户查看不同歌曲详情时的上下文一致性，避免“无标题弹窗”导致的用户认知混乱。

（2）交互逻辑封装

• onPlay 方法封装了歌曲播放的核心业务逻辑，通过 Alert 弹窗清晰反馈播放操作结果，预留了后续对接原生音频播放 API 的扩展空间，符合音乐类应用“操作即时反馈”的交互原则；
• onMore 方法统一处理歌曲详情弹窗的触发逻辑，所有榜单歌曲均遵循相同的交互范式，提升用户体验的一致性，同时保证不同歌曲详情的展示逻辑可复用；
• onCloseDetail 方法负责状态重置与弹窗关闭，形成“点击详情-查看歌曲信息-关闭返回”的完整交互链路，通过 setDetailTitle(null) 置空状态，避免内存泄漏与状态残留，符合 React 函数式组件的状态管理最佳实践。

这种轻量化的状态管理模式，既避免了 Redux 等重型状态库的引入，又保证了业务逻辑的清晰性，为跨端迁移保留了无框架依赖的纯逻辑层：

const onPlay = (song: string) => Alert.alert('排行榜播放', `播放：${song}`);
const onMore = (song: string) => {
  setDetailTitle(song);
  setDetailVisible(true);
};
const onCloseDetail = () => {
  setDetailVisible(false);
  setDetailTitle(null);
};

2. 布局系统与视觉层级设计

音乐排行榜页面的核心设计诉求是榜单数据的清晰展示、操作按钮的视觉区分、沉浸式详情弹窗的呈现，其布局与样式系统体现了 React Native 音乐类页面的设计最佳实践：

（1）榜单结构化布局

row 样式采用 Flex 布局实现“排名-歌曲名-操作按钮”的经典音乐榜单展示结构：

• rank 样式通过固定宽度（20px）和居中对齐，保证排名数字的视觉统一性，暖橙色系（#b45309）突出榜单排名的视觉层级；
• song 样式通过 flex: 1 保证歌曲名区域自适应，13px 的字号搭配半粗体，兼顾可读性与视觉层级；
• playAction 样式采用品牌橙系的背景色（#fde68a）与文字色，10px 的圆角设计提升按钮的视觉质感，同时与详情弹窗的操作按钮保持视觉一致性。

（2）功能分区视觉隔离

通过 section（白色背景）和 sectionAlt（浅橙背景）两个差异化的容器样式，将“本周热门榜单”与“编辑推荐”两个核心模块进行视觉区分：

• section 采用纯白背景+轻微阴影，突出榜单数据的核心地位；
• sectionAlt 采用浅橙背景（#fff7ed），贴合音乐类应用的温暖品牌调性，同时实现功能分区，符合用户对“核心榜单-辅助推荐”的认知习惯。

（3）沉浸式弹窗设计

detailOverlay 采用绝对定位+半透明遮罩（rgba(0,0,0,0.25)）实现沉浸式的详情弹窗效果：

• detailPanel 通过 maxWidth: 420 限制弹窗宽度，适配手机、平板等不同尺寸设备；
• 弹窗内部分为“头部（标题+关闭按钮）-内容区（歌曲信息）-操作区（试听+收藏）”三层结构，符合移动端弹窗的交互规范；
• 操作按钮通过差异化的背景色（#f1f5f9 普通按钮 / #ffedd5 主按钮）区分操作优先级，“随机试听”为基础操作，“收藏”为核心操作，符合音乐类应用的操作权重设计。

（4）样式模块化管理

样式编写采用 StyleSheet.create 集中管理，属性命名遵循 React Native 驼峰命名规范，同时通过模块化的样式前缀（row/reco/detail）实现样式的分类管理：

• 所有与榜单相关的样式以 row 为前缀，保证样式的语义化；
• 编辑推荐相关样式以 reco 为前缀，便于维护与复用；
• 详情弹窗相关样式以 detail 为前缀，形成独立的样式模块。

3. 组件化与性能优化

页面采用“基础组件 + 业务模块”的轻量化组件架构，核心组件的使用贴合 React Native 性能优化原则：

• ScrollView 组件：包裹核心内容区域，针对短榜单场景（5 首歌曲+2 条推荐）无需引入更复杂的 FlatList，减少组件初始化开销，同时保证长榜单场景下的滚动体验；
• TouchableOpacity 组件：替代原生按钮组件，通过透明度变化提供自然的点击反馈，相比 TouchableHighlight 更适配暖色调背景的视觉风格，所有可点击元素（详情按钮、关闭按钮、试听/收藏按钮）均使用该组件，保证交互反馈的统一性；
• Image 组件：使用 Base64 编码的图标资源，避免网络请求带来的加载延迟，同时适配不同设备的分辨率，保证榜单图标、推荐图标等关键元素显示的清晰度，Base64 编码也避免了跨平台资源路径适配的问题，尤其适合音乐类应用“离线可用”的业务诉求；
• 条件渲染优化：弹窗的显隐完全由 detailVisible 状态控制，未显示时不渲染 DOM 节点，减少页面初始渲染开销，提升加载性能；
• Flex 布局优化：通过 flex: 1 保证歌曲名区域的自适应布局，避免固定宽度导致的内容溢出问题，适配不同屏幕尺寸的设备。

二、React Native 到鸿蒙的跨端适配技术路径

1. 核心技术体系映射

音乐榜单类业务页面的跨端适配核心在于“业务逻辑复用最大化，UI 层改动最小化”，React Native 与鸿蒙 ArkTS 的核心能力映射如下：

React Native 核心能力	鸿蒙 ArkTS 对应实现	适配要点
函数式组件 + useState	@Component + @State/@Link	状态逻辑完全复用，useState 替换为 @State 装饰器，状态更新逻辑不变
JSX 声明式 UI	TSX 声明式 UI	语法几乎完全兼容，View→Column/Row、Text→Text、Image→Image、TouchableOpacity→TextButton
StyleSheet 样式系统	@Styles/@Extend 样式	Flex 布局属性完全复用，绝对定位改为 Position.FIXED + Stack 布局，阴影属性调整为 shadow 统一配置，颜色/间距等样式常量可直接复用
模态弹窗（条件渲染）	if/else 条件渲染 + Stack 布局	保留 detailVisible 状态控制显隐，遮罩层改为 Stack 组件实现层级覆盖，弹窗内容结构完全复用
Alert 弹窗	promptAction 弹窗	封装统一的弹窗工具函数，屏蔽平台 API 差异，音乐业务提示文案完全复用

2. 核心模块迁移实操示例

以榜单列表模块和详情弹窗模块为例，展示 React Native 代码迁移到鸿蒙 ArkTS 的核心改动：

（1）榜单列表渲染迁移

React Native 原代码：

<View style={styles.row}>
  <Text style={styles.rank}>1</Text>
  <Text style={styles.song}>风的约定 · 艺人A</Text>
  <TouchableOpacity onPress={() => onMore('风的约定 · 详情')}>
    <Text style={styles.playAction}>详情</Text>
  </TouchableOpacity>
</View>

鸿蒙 ArkTS 迁移后代码：

// 榜单行渲染函数
@Builder
renderRankRow(rank: string, song: string, detailTitle: string) {
  Row() {
    Text(rank)
      .width(20)
      .textAlign(TextAlign.Center)
      .color('#b45309')
      .fontWeight(FontWeight.Bold);
    
    Text(song)
      .flexGrow(1)
      .fontSize(13)
      .color('#0f172a')
      .fontWeight(FontWeight.SemiBold);
    
    TextButton({
      onClick: () => this.onMore(detailTitle)
    }) {
      Text('详情')
        .fontSize(11)
        .color('#b45309')
        .backgroundColor('#fde68a')
        .padding({ left: 8, right: 8, top: 4, bottom: 4 })
        .borderRadius(10);
    }
  }
  .width('100%')
  .padding({ top: 10, bottom: 10 })
  .borderBottom({ width: 1, color: '#f3f4f6' })
  .alignItems(Alignment.Center);
}

// 榜单列表渲染
Column() {
  this.renderRankRow('1', '风的约定 · 艺人A', '风的约定 · 详情');
  this.renderRankRow('2', '夏夜微光 · 艺人B', '夏夜微光 · 详情');
  this.renderRankRow('3', '海潮之声 · 艺人C', '海潮之声 · 详情');
  this.renderRankRow('4', '黎明前的序曲 · 艺人D', '黎明前的序曲 · 详情');
  this.renderRankRow('5', '微风起 · 艺人E', '微风起 · 详情');
}
.backgroundColor('#ffffff')
.borderRadius(12)
.padding(14)
.shadow({ radius: 2, color: '#000', opacity: 0.08, offsetX: 0, offsetY: 1 });

（2）详情弹窗迁移

React Native 原代码：

{detailVisible && (
  <View style={styles.detailOverlay}>
    <View style={styles.detailPanel}>
      <View style={styles.detailHeader}>
        <Text style={styles.detailTitle}>{detailTitle}</Text>
        <TouchableOpacity onPress={onCloseDetail}>
          <Text style={styles.detailClose}>关闭</Text>
        </TouchableOpacity>
      </View>
      {/* 弹窗内容省略 */}
    </View>
  </View>
)}

鸿蒙 ArkTS 迁移后代码：

// 详情弹窗条件渲染
if (this.detailVisible) {
  Stack() {
    // 遮罩层
    Column()
      .width('100%')
      .height('100%')
      .backgroundColor('rgba(0,0,0,0.25)');
    
    // 弹窗内容
    Column() {
      // 弹窗头部
      Row() {
        Text(this.detailTitle || '')
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
          .color('#0f172a');
        
        TextButton({
          onClick: () => this.onCloseDetail()
        }) {
          Text('关闭')
            .fontSize(12)
            .color('#b45309')
            .backgroundColor('#ffedd5')
            .padding({ left: 8, right: 8, top: 4, bottom: 4 })
            .borderRadius(10);
        }
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
      .alignItems(Alignment.Center);
      
      // 弹窗内容区
      Column() {
        Row() {
          Image('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAASsJTYQAAAAASUVORK5CYII=')
            .width(18)
            .height(18)
            .marginRight(6);
          Text('上榜理由：播放量增长、收藏度较高。')
            .fontSize(12)
            .color('#475569');
        }
        .width('100%')
        .marginTop(8)
        .alignItems(Alignment.Center);
        
        Row() {
          Image('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAASsJTYQAAAAASUVORK5CYII=')
            .width(18)
            .height(18)
            .marginRight(6);
          Text('操作：播放试听或加入收藏清单。')
            .fontSize(12)
            .color('#475569');
        }
        .width('100%')
        .marginTop(8)
        .alignItems(Alignment.Center);
      }
      .width('100%')
      .marginTop(10);
      
      // 弹窗操作区
      Row() {
        TextButton({
          onClick: () => this.onPlay('随机试听')
        }) {
          Text('随机试听')
            .fontSize(12)
            .color('#334155')
            .fontWeight(FontWeight.SemiBold)
            .backgroundColor('#f1f5f9')
            .padding({ top: 8, bottom: 8, left: 12, right: 12 })
            .borderRadius(10)
            .marginRight(8);
        }
        
        TextButton({
          onClick: () => promptAction.showAlert({ title: '收藏', message: '已收藏该歌曲' })
        }) {
          Text('收藏')
            .fontSize(12)
            .color('#b45309')
            .fontWeight(FontWeight.Bold)
            .backgroundColor('#ffedd5')
            .padding({ top: 8, bottom: 8, left: 12, right: 12 })
            .borderRadius(10);
        }
      }
      .width('100%')
      .marginTop(12)
      .justifyContent(FlexAlign.FlexEnd);
    }
    .width('100%')
    .maxWidth(420)
    .backgroundColor('#ffffff')
    .borderRadius(14)
    .padding(14)
    .shadow({ radius: 4, color: '#000', opacity: 0.12, offsetX: 0, offsetY: 2 });
  }
  .width('100%')
  .height('100%')
  .justifyContent(FlexAlign.Center)
  .alignItems(Alignment.Center)
  .padding(16)
  .position(Position.Fixed);
}

3. 完整鸿蒙迁移示例

以下是音乐排行榜页面的完整鸿蒙迁移代码，展示端到端的迁移思路：

import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct MusicCharts {
  // 状态定义（对应 React Native 的 useState）
  @State detailVisible: boolean = false;
  @State detailTitle: string | null = null;

  // 业务逻辑完全复用，仅调整函数定义方式
  onPlay(song: string) {
    promptAction.showAlert({
      title: '排行榜播放',
      message: `播放：${song}`
    });
  }

  onMore(song: string) {
    this.detailTitle = song;
    this.detailVisible = true;
  }

  onCloseDetail() {
    this.detailVisible = false;
    this.detailTitle = null;
  }

  build() {
    SafeArea() {
      Column() {
        // 头部区域
        Row() {
          Text('音乐播放器 · 排行榜')
            .fontSize(18)
            .fontWeight(FontWeight.Bold)
            .color('#0f172a');
          
          Row() {
            Image('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAASsJTYQAAAAASUVORK5CYII=')
              .width(24)
              .height(24);
            Text('🏆')
              .fontSize(18)
              .marginLeft(8);
          }
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#ffffff')
        .borderBottom({ width: 1, color: '#fde68a' })
        .justifyContent(FlexAlign.SpaceBetween)
        .alignItems(Alignment.Center);

        // 核心内容区
        Scroll() {
          Column() {
            // 本周热门榜单
            Column() {
              Text('本周热门')
                .fontSize(16)
                .fontWeight(FontWeight.Bold)
                .color('#0f172a')
                .marginBottom(10);
              
              this.renderRankRow('1', '风的约定 · 艺人A', '风的约定 · 详情');
              this.renderRankRow('2', '夏夜微光 · 艺人B', '夏夜微光 · 详情');
              this.renderRankRow('3', '海潮之声 · 艺人C', '海潮之声 · 详情');
              this.renderRankRow('4', '黎明前的序曲 · 艺人D', '黎明前的序曲 · 详情');
              this.renderRankRow('5', '微风起 · 艺人E', '微风起 · 详情');
            }
            .width('100%')
            .backgroundColor('#ffffff')
            .borderRadius(12)
            .padding(14)
            .shadow({ radius: 2, color: '#000', opacity: 0.08, offsetX: 0, offsetY: 1 });

            // 编辑推荐
            Column() {
              Text('编辑推荐')
                .fontSize(16)
                .fontWeight(FontWeight.Bold)
                .color('#0f172a')
                .marginBottom(10);
              
              Row() {
                Image('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAASsJTYQAAAAASUVORK5CYII=')
                  .width(18)
                  .height(18)
                  .marginRight(6);
                Text('轻快午后 · 悠扬旋律')
                  .fontSize(12)
                  .color('#7c2d12');
              }
              .width('100%')
              .marginTop(8)
              .alignItems(Alignment.Center);
              
              Row() {
                Image('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAASsJTYQAAAAASUVORK5CYII=')
                  .width(18)
                  .height(18)
                  .marginRight(6);
                Text('周末夜听 · 电音精选')
                  .fontSize(12)
                  .color('#7c2d12');
              }
              .width('100%')
              .marginTop(8)
              .alignItems(Alignment.Center);
            }
            .width('100%')
            .backgroundColor('#fff7ed')
            .borderRadius(12)
            .padding(14)
            .marginTop(16);
          }
          .width('100%')
          .padding(16);
        }
        .flexGrow(1);

        // 详情弹窗（条件渲染）
        if (this.detailVisible) {
          this.renderDetailPanel();
        }
      }
      .width('100%')
      .height('100%')
      .backgroundColor('#fffefc');
    }
  }

  // 榜单行渲染函数
  @Builder
  renderRankRow(rank: string, song: string, detailTitle: string) {
    // 实现同前文示例
  }

  // 详情弹窗渲染函数
  @Builder
  renderDetailPanel() {
    // 实现同前文示例
  }
}

三、音乐榜单类页面跨端开发最佳实践

1. 业务逻辑抽离复用

音乐榜单类页面的核心价值在于榜单展示与交互逻辑（播放、查看详情、收藏），应将纯 TypeScript 编写的交互方法封装为独立工具函数，脱离框架依赖，实现跨端 100% 复用：

// 独立的业务逻辑文件 musicLogic.ts
export const handlePlaySong = (song: string) => {
  return `播放：${song}`;
};

export const handleShowSongDetail = (song: string, setDetailTitle: (title: string | null) => void, setDetailVisible: (visible: boolean) => void) => {
  setDetailTitle(song);
  setDetailVisible(true);
};

export const handleCloseSongDetail = (setDetailTitle: (title: string | null) => void, setDetailVisible: (visible: boolean) => void) => {
  setDetailVisible(false);
  setDetailTitle(null);
};

export const handleCollectSong = () => {
  return '已收藏该歌曲';
};

React Native 中调用：

const onPlay = (song: string) => Alert.alert('排行榜播放', handlePlaySong(song));

鸿蒙中调用：

onPlay(song: string) {
  promptAction.showAlert({
    title: '排行榜播放',
    message: handlePlaySong(song)
  });
}

2. 样式常量统一管理

将页面的核心样式常量（品牌色、圆角、间距、字号）抽离为独立文件，实现跨端样式风格的一致性，尤其适合音乐类页面“温暖、活力”的视觉调性：

// styles/constants.ts
export const COLORS = {
  primary: '#b45309',        // 主色（暖橙）
  primaryLight: '#fde68a',   // 主色浅背景
  secondaryBg: '#fff7ed',    // 辅助色背景
  border: '#f3f4f6',         // 边框色
  textPrimary: '#0f172a',    // 主要文本色
  textSecondary: '#7c2d12',  // 次要文本色
  textTertiary: '#475569',   // 提示文本色
  background: '#fffefc',     // 页面背景色
  headerBorder: '#fde68a',   // 头部边框色
  btnNormalBg: '#f1f5f9',    // 普通按钮背景
  btnPrimaryBg: '#ffedd5',   // 主按钮背景
};

export const SIZES = {
  borderRadiusXL: 14,        // 弹窗圆角
  borderRadiusL: 12,         // 卡片圆角
  borderRadiusM: 10,         // 按钮圆角
  paddingBase: 16,           // 基础内边距
  paddingCard: 14,           // 卡片内边距
  paddingBtnM: 8,            // 中按钮内边距
  paddingBtnS: 4,            // 小按钮内边距
  iconSizeS: 18,             // 小图标尺寸
  iconSizeM: 24,             // 中图标尺寸
  rankWidth: 20,             // 排名数字宽度
};

export const FONTS = {
  sizeTitle: 18,             // 页面标题字号
  sizeSection: 16,           // 区块标题字号
  sizeItem: 13,              // 榜单项字号
  sizeSub: 12,               // 辅助文本字号
  sizeTag: 11,               // 按钮文本字号
  weightBold: 'bold',        // 粗体
  weightSemiBold: '600',     // 半粗体
};

3. 原生能力适配层封装

音乐类应用常需调用音频播放、本地收藏、榜单更新等原生能力，封装统一的适配层可大幅降低跨端适配成本：

// utils/nativeAdapter.ts
export const showAlert = (title: string, message: string) => {
  // React Native 环境
  if (typeof Alert !== 'undefined') {
    Alert.alert(title, message);
  } 
  // 鸿蒙环境
  else if (typeof promptAction !== 'undefined') {
    promptAction.showAlert({ title, message });
  }
};

// 音频播放适配
export const playAudio = async (audioUrl: string) => {
  if (typeof Audio !== 'undefined') {
    // React Native 音频播放逻辑
    const sound = new Audio(audioUrl);
    await sound.play();
  } else if (typeof audioPlayer !== 'undefined') {
    // 鸿蒙音频播放逻辑
    audioPlayer.play(audioUrl);
  }
};

// 本地收藏适配
export const saveToFavorites = async (songId: string) => {
  if (typeof AsyncStorage !== 'undefined') {
    // React Native 本地存储
    const favorites = await AsyncStorage.getItem('favorites') || '[]';
    const favoritesList = JSON.parse(favorites);
    favoritesList.push(songId);
    await AsyncStorage.setItem('favorites', JSON.stringify(favoritesList));
  } else if (typeof storage !== 'undefined') {
    // 鸿蒙本地存储
    const favorites = await storage.get('favorites') || '[]';
    const favoritesList = JSON.parse(favorites);
    favoritesList.push(songId);
    await storage.set('favorites', JSON.stringify(favoritesList));
  }
};

总结

关键点回顾

1. React Native 端的核心价值在于极简的状态管理、清晰的榜单结构化布局、轻量化的组件组合，为音乐榜单类页面提供了“列表浏览-详情查看-操作反馈”的完整交互闭环，同时为跨端迁移奠定了良好基础；
2. 鸿蒙端的适配核心是组件映射、样式调整、原生能力封装，核心的音乐榜单交互逻辑（播放、查看详情、收藏）可 100% 复用，仅需调整少量语法细节，保证音乐类页面的核心体验不受影响；
3. 音乐榜单类页面跨端开发的关键是“抽离纯业务逻辑、统一样式常量、封装原生能力适配层”，实现极低的迁移成本和极高的代码复用率，同时保证音乐类应用“交互流畅、视觉统一、体验一致”的核心诉求。

音乐排行榜页面的跨端迁移实践表明，React Native 开发的音乐类页面向鸿蒙迁移时，80% 以上的核心代码可直接复用，仅需 20% 左右的 UI 层适配工作。这种高复用率的迁移模式，不仅大幅提升了跨端开发效率，更重要的是保证了音乐类应用“轻量化、高反馈、沉浸式”的核心体验在不同平台的一致性。

---

React Native音乐排行榜组件技术解析：媒体交互与数据展示的跨端实践

引言：音乐类应用的技术演进

随着移动互联网和流媒体技术的发展，音乐类应用已经从简单的播放器演变为集发现、播放、社交于一体的综合平台。MusicCharts组件展示了如何在移动端实现一套完整的音乐排行榜功能，从榜单展示、歌曲详情到播放交互，形成了一个完整的音乐发现体验。

从技术架构的角度来看，这个组件不仅是一个信息展示界面，更是媒体类应用交互设计的典型案例。它需要协调音乐数据的展示、用户交互的响应、以及播放状态的同步等多个技术维度。当我们将这套架构迁移到鸿蒙平台时，需要深入理解其交互逻辑和数据流转机制，才能确保跨端实现的完整性和可靠性。

数据结构：音乐榜单的层次化组织

榜单数据的模型设计

interface Song {
  id: string;
  rank: number;
  title: string;
  artist: string;
  playCount: number;
  duration: number;
  coverUrl: string;
  audioUrl: string;
}

interface Chart {
  id: string;
  title: string;
  updateTime: string;
  songs: Song[];
  description?: string;
}

虽然当前实现使用硬编码数据，但从代码结构可以推断出完整的音乐榜单模型：

// 完整的音乐榜单数据结构
interface MusicChart {
  id: string;
  name: string;
  type: 'hot' | 'new' | 'editor' | 'genre';
  updateFrequency: 'daily' | 'weekly' | 'monthly';
  lastUpdated: string;
  songs: ChartSong[];
  coverImage?: string;
}

interface ChartSong {
  id: string;
  rank: number;
  title: string;
  artist: ArtistInfo;
  album?: AlbumInfo;
  duration: number; // 秒
  playCount: number;
  likeCount: number;
  audioUrl: string;
  coverUrl: string;
  isPlaying?: boolean;
}

榜单项的结构化展示

row: {
  flexDirection: 'row',
  alignItems: 'center',
  paddingVertical: 10,
  borderBottomWidth: 1,
  borderBottomColor: '#f3f4f6'
}

榜单项采用了清晰的横向布局，每个项包含三个核心信息：

1. 排名标识：数字排名和颜色强调
2. 歌曲信息：歌名和艺人
3. 操作按钮：详情查看和播放

在鸿蒙ArkUI中，这种榜单项可以通过ForEach实现：

// 鸿蒙榜单项组件
@Component
struct ChartItem {
  @Prop song: ChartSong;
  @State isPlaying: boolean = false;
  
  build() {
    Row() {
      Text(this.song.rank.toString())
        .width(40)
        .textAlign(TextAlign.Center)
        .fontColor('#b45309')
        .fontWeight(FontWeight.Bold)
      
      Column() {
        Text(this.song.title)
          .fontSize(14)
          .fontWeight(FontWeight.SemiBold)
          .fontColor('#0f172a')
        Text(this.song.artist.name)
          .fontSize(12)
          .fontColor('#64748b')
      }
      .layoutWeight(1)
      
      Button('详情')
        .fontSize(11)
        .fontColor('#b45309')
        .backgroundColor('#fde68a')
        .padding({ left: 8, right: 8, top: 4, bottom: 4 })
        .borderRadius(10)
        .onClick(() => this.showDetail())
    }
    .padding({ top: 10, bottom: 10 })
    .border({ bottom: { width: 1, color: '#f3f4f6' } })
  }
}

状态管理：播放交互的精确控制

多维状态的设计模式

const [detailVisible, setDetailVisible] = useState(false);
const [detailTitle, setDetailTitle] = useState<string | null>(null);

音乐播放场景下，状态管理需要覆盖更多维度：

// 音乐播放状态管理
interface PlayerState {
  currentSong: Song | null;
  isPlaying: boolean;
  progress: number; // 播放进度 0-100
  volume: number;   // 音量 0-100
  queue: Song[];    // 播放队列
  repeatMode: 'none' | 'one' | 'all';
  shuffle: boolean;
}

// 榜单状态管理
interface ChartState {
  activeChart: string;
  charts: Chart[];
  isLoading: boolean;
  error: string | null;
}

在鸿蒙ArkUI中，这种复杂状态管理可以通过@State和@Link实现：

// 鸿蒙播放状态管理
@Observed
class PlayerState {
  currentSong: Song | null = null;
  isPlaying: boolean = false;
  progress: number = 0;
  
  updateProgress(newProgress: number) {
    this.progress = Math.min(100, Math.max(0, newProgress));
  }
}

@Component
struct MusicPlayer {
  @Link playerState: PlayerState;
  
  build() {
    Column() {
      // 播放器界面
      ProgressBar({ progress: this.playerState.progress })
      PlayButton({ 
        isPlaying: this.playerState.isPlaying,
        onToggle: () => this.togglePlay()
      })
    }
  }
  
  private togglePlay() {
    this.playerState.isPlaying = !this.playerState.isPlaying;
  }
}

播放功能的业务实现

const onPlay = (song: string) => Alert.alert('排行榜播放', `播放：${song}`);

在真实音乐应用中，播放功能需要更复杂的实现：

// 播放管理器
class PlaybackManager {
  private audioInstance: Audio.Sound | null = null;
  
  async playSong(song: Song): Promise<void> {
    if (this.audioInstance) {
      await this.audioInstance.unload();
    }
    
    this.audioInstance = new Audio.Sound();
    try {
      await this.audioInstance.loadAsync({ uri: song.audioUrl });
      await this.audioInstance.playAsync();
    } catch (error) {
      console.error('播放失败:', error);
    }
  }
  
  async togglePlayPause(): Promise<void> {
    if (!this.audioInstance) return;
    
    const status = await this.audioInstance.getStatusAsync();
    if (status.isPlaying) {
      await this.audioInstance.pauseAsync();
    } else {
      await this.audioInstance.playAsync();
    }
  }
}

交互设计：音乐发现的流畅体验

详情弹窗的信息架构

detailPanel: {
  width: '100%',
  maxWidth: 420,
  backgroundColor: '#ffffff',
  borderRadius: 14,
  padding: 14
}

详情弹窗采用了标准的模态设计，包含完整的用户交互流程：

1. 头部：歌曲标题和关闭操作
2. 主体：歌曲详情和推荐理由
3. 底部：主要操作按钮（播放、收藏）

在鸿蒙ArkUI中，这种模态交互可以通过CustomDialog实现：

// 鸿蒙歌曲详情弹窗
@CustomDialog
struct SongDetailDialog {
  @Prop song: ChartSong;
  controller: CustomDialogController;
  
  build() {
    Column() {
      // 头部
      Row() {
        Text(this.song.title)
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
          .fontColor('#0f172a')
        
        Button('关闭')
          .fontSize(12)
          .fontColor('#b45309')
          .backgroundColor('#ffedd5')
          .padding({ left: 8, right: 8, top: 4, bottom: 4 })
          .borderRadius(10)
          .onClick(() => this.controller.close())
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
      
      // 分割线
      Divider()
        .margin({ top: 10, bottom: 10 })
      
      // 主体内容
      Column() {
        Row() {
          Image($r('app.media.ic_chart'))
            .width(18)
            .height(18)
            .margin({ right: 6 })
          Text(`上榜理由：播放量 ${this.song.playCount}次，收藏 ${this.song.likeCount}次`)
            .fontSize(12)
            .fontColor('#475569')
        }
        
        Row() {
          Image($r('app.media.ic_play'))
            .width(18)
            .height(18)
            .margin({ right: 6 })
          Text('操作：播放试听或加入收藏清单')
            .fontSize(12)
            .fontColor('#475569')
        }
        .margin({ top: 8 })
      }
      
      // 底部操作
      Row() {
        Button('随机试听')
          .flexGrow(1)
          .margin({ right: 8 })
          .onClick(() => this.playRandom())
        
        Button('收藏')
          .flexGrow(1)
          .backgroundColor('#ffedd5')
          .fontColor('#b45309')
          .onClick(() => this.addToFavorites())
      }
      .margin({ top: 12 })
    }
    .padding(14)
    .width('80%')
    .backgroundColor(Color.White)
    .borderRadius(14)
  }
}

操作按钮的交互反馈

playAction: {
  fontSize: 11,
  color: '#b45309',
  backgroundColor: '#fde68a',
  paddingHorizontal: 8,
  paddingVertical: 4,
  borderRadius: 10
}

操作按钮采用了主次分明的设计策略，使用黄色调强调音乐类应用的活动属性：

// 鸿蒙操作按钮组件
@Component
struct ActionButton {
  @Prop text: string;
  @Prop icon: Resource;
  @Prop isPrimary: boolean = false;
  @Prop onClick: () => void;
  
  build() {
    Button() {
      Row() {
        Image(this.icon)
          .width(16)
          .height(16)
          .margin({ right: 6 })
        Text(this.text)
          .fontSize(14)
          .fontColor(this.isPrimary ? '#b45309' : '#334155')
      }
      .justifyContent(FlexAlign.Center)
      .alignItems(VerticalAlign.Center)
    }
    .width('100%')
    .height(44)
    .backgroundColor(this.isPrimary ? '#ffedd5' : '#f1f5f9')
    .borderRadius(12)
    .onClick(this.onClick)
  }
}

样式系统：音乐类应用的视觉语言

黄色调色彩系统的应用

container: { backgroundColor: '#fffefc' }
sectionAlt: { backgroundColor: '#fff7ed' }
playAction: { color: '#b45309', backgroundColor: '#fde68a' }

组件采用了黄色调为主的设计语言，这种色彩在音乐类应用中具有明确的暗示：

1. 背景色（#fffefc）：极浅黄色，营造温暖音乐氛围
2. 次要区域（#fff7ed）：浅黄色背景，区分功能区块
3. 操作按钮（#fde68a）：黄色背景，强调主要操作
4. 强调色（#b45309）：深橙色文字，传达活力与热情

在跨端开发中，这种色彩系统需要建立统一的资源映射：

// 统一的音乐应用色彩系统
const MusicAppColors = {
  // 背景色
  background: '#fffefc',    // 主背景 - 极浅黄
  surfacePrimary: '#ffffff', // 卡片背景
  surfaceSecondary: '#fff7ed', // 次要背景
  
  // 操作色
  primary: '#b45309',       // 主色 - 橙色
  primaryLight: '#fde68a',  // 主色浅 - 按钮背景
  primaryDark: '#92400e',   // 主色深 - 交互状态
  
  // 功能色
  play: '#b45309',          // 播放功能
  favorite: '#dc2626',      // 收藏功能
  textPrimary: '#1e293b'    // 主要文字
};

视觉层次与信息密度

sectionTitle: { fontSize: 16, fontWeight: 'bold' }
song: { fontSize: 13, fontWeight: '600' }
rank: { fontSize: 11, fontWeight: '700' }

组件的字体系统呈现出清晰的层次结构：

• 区块标题（16px, bold）：最高层级，引导用户注意力
• 歌曲标题（13px, semibold）：次级标题，标识核心内容
• 排名标识（11px, bold）：状态标识，强调关键信息

鸿蒙跨端适配：媒体播放的技术实现

音频播放的跨平台策略

音乐播放功能在两个平台上有不同的实现方式：

// React Native音频播放
import { Audio } from 'expo-av';

class AudioPlayer {
  private sound: Audio.Sound | null = null;
  
  async play(url: string): Promise<void> {
    if (this.sound) {
      await this.sound.unloadAsync();
    }
    
    this.sound = new Audio.Sound();
    try {
      await this.sound.loadAsync({ uri: url });
      await this.sound.playAsync();
    } catch (error) {
      console.error('播放失败:', error);
    }
  }
  
  async pause(): Promise<void> {
    if (this.sound) {
      await this.sound.pauseAsync();
    }
  }
}

在鸿蒙端，音频播放可以通过媒体服务实现：

// 鸿蒙音频播放
import media from '@ohos.multimedia.media';

class AudioPlayerHarmony {
  private audioPlayer: media.AudioPlayer | null = null;
  
  async initialize(): Promise<void> {
    this.audioPlayer = await media.createAudioPlayer();
  }
  
  async play(url: string): Promise<void> {
    if (!this.audioPlayer) {
      await this.initialize();
    }
    
    await this.audioPlayer.reset();
    await this.audioPlayer.setSource(url);
    await this.audioPlayer.play();
  }
  
  async pause(): Promise<void> {
    if (this.audioPlayer) {
      await this.audioPlayer.pause();
    }
  }
}

播放状态同步机制

播放状态需要在组件间保持同步：

// 播放状态同步服务
class PlaybackStateManager {
  private static instance: PlaybackStateManager;
  private listeners: ((state: PlaybackState) => void)[] = [];
  private currentState: PlaybackState = {
    isPlaying: false,
    currentSong: null,
    progress: 0
  };
  
  static getInstance(): PlaybackStateManager {
    if (!PlaybackStateManager.instance) {
      PlaybackStateManager.instance = new PlaybackStateManager();
    }
    return PlaybackStateManager.instance;
  }
  
  addListener(listener: (state: PlaybackState) => void): void {
    this.listeners.push(listener);
  }
  
  removeListener(listener: (state: PlaybackState) => void): void {
    this.listeners = this.listeners.filter(l => l !== listener);
  }
  
  updateState(newState: Partial<PlaybackState>): void {
    this.currentState = { ...this.currentState, ...newState };
    this.notifyListeners();
  }
  
  private notifyListeners(): void {
    this.listeners.forEach(listener => listener(this.currentState));
  }
}

性能优化：音乐应用的流畅体验

图片资源的懒加载

音乐封面图片需要优化加载：

// 封面图片懒加载
import { FastImage } from 'react-native-fast-image';

const CoverImage = ({ uri }: { uri: string }) => (
  <FastImage
    source={{ uri }}
    style={styles.coverImage}
    resizeMode={FastImage.resizeMode.cover}
  />
);

播放进度的高效更新

// 播放进度管理
class PlaybackProgress {
  private interval: NodeJS.Timeout | null = null;
  private duration: number = 0;
  private startTime: number = 0;
  private updateCallback: (progress: number) => void;
  
  constructor(duration: number, callback: (progress: number) => void) {
    this.duration = duration;
    this.updateCallback = callback;
  }
  
  start() {
    this.startTime = Date.now();
    this.interval = setInterval(() => {
      const elapsed = (Date.now() - this.startTime) / 1000;
      const progress = Math.min(100, (elapsed / this.duration) * 100);
      this.updateCallback(progress);
    }, 1000);
  }
  
  stop() {
    if (this.interval) {
      clearInterval(this.interval);
      this.interval = null;
    }
  }
}

总结：音乐排行榜组件的跨端设计哲学

MusicCharts组件展示了音乐类应用界面的核心技术要点：

1. 数据架构清晰：层次化的榜单模型、歌曲信息、播放状态
2. 交互体验流畅：详情弹窗、播放控制、收藏功能
3. 视觉语言专业：黄色调设计体系、清晰的视觉层次
4. 性能优化到位：图片懒加载、状态同步、进度管理
5. 跨端适配系统：音频播放API抽象、状态管理一致性

从跨端开发的角度来看，音乐应用系统的实现关键在于：

• 媒体控制：统一的播放接口和状态管理
• 交互响应：流畅的用户反馈和动画效果
• 数据同步：实时榜单更新和播放状态同步
• 性能保障：大数据量下的流畅滚动体验
• 扩展性良好：支持更多音乐功能和社交互动

随着音乐流媒体技术的发展和用户对个性化体验需求的提升，音乐类应用将在未来扮演越来越重要的角色。其技术实现的质量和跨端一致性，将直接影响产品的用户体验和市场竞争力。

---

真实演示案例代码：

import React, { useState } from 'react';
import { SafeAreaView, View, Text, StyleSheet, TouchableOpacity, ScrollView, Alert, Image } from 'react-native';

const ICONS_BASE64 = {
  chart: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAASsJTYQAAAAASUVORK5CYII=',
  play: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAASsJTYQAAAAASUVORK5CYII=',
  star: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAASsJTYQAAAAASUVORK5CYII=',
};

const MusicCharts: React.FC = () => {
  const [detailVisible, setDetailVisible] = useState(false);
  const [detailTitle, setDetailTitle] = useState<string | null>(null);
  const onPlay = (song: string) => Alert.alert('排行榜播放', `播放：${song}`);
  const onMore = (song: string) => {
    setDetailTitle(song);
    setDetailVisible(true);
  };
  const onCloseDetail = () => {
    setDetailVisible(false);
    setDetailTitle(null);
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>音乐播放器 · 排行榜</Text>
        <View style={styles.headerIcons}>
          <Image source={{ uri: ICONS_BASE64.chart }} style={styles.headerIconImg} />
          <Text style={styles.headerEmoji}>🏆</Text>
        </View>
      </View>

      <ScrollView style={styles.content}>
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>本周热门</Text>
          <View style={styles.row}>
            <Text style={styles.rank}>1</Text>
            <Text style={styles.song}>风的约定 · 艺人A</Text>
            <TouchableOpacity onPress={() => onMore('风的约定 · 详情')}>
              <Text style={styles.playAction}>详情</Text>
            </TouchableOpacity>
          </View>
          <View style={styles.row}>
            <Text style={styles.rank}>2</Text>
            <Text style={styles.song}>夏夜微光 · 艺人B</Text>
            <TouchableOpacity onPress={() => onMore('夏夜微光 · 详情')}>
              <Text style={styles.playAction}>详情</Text>
            </TouchableOpacity>
          </View>
          <View style={styles.row}>
            <Text style={styles.rank}>3</Text>
            <Text style={styles.song}>海潮之声 · 艺人C</Text>
            <TouchableOpacity onPress={() => onMore('海潮之声 · 详情')}>
              <Text style={styles.playAction}>详情</Text>
            </TouchableOpacity>
          </View>
          <View style={styles.row}>
            <Text style={styles.rank}>4</Text>
            <Text style={styles.song}>黎明前的序曲 · 艺人D</Text>
            <TouchableOpacity onPress={() => onMore('黎明前的序曲 · 详情')}>
              <Text style={styles.playAction}>详情</Text>
            </TouchableOpacity>
          </View>
          <View style={styles.row}>
            <Text style={styles.rank}>5</Text>
            <Text style={styles.song}>微风起 · 艺人E</Text>
            <TouchableOpacity onPress={() => onMore('微风起 · 详情')}>
              <Text style={styles.playAction}>详情</Text>
            </TouchableOpacity>
          </View>
        </View>

        <View style={styles.sectionAlt}>
          <Text style={styles.sectionTitle}>编辑推荐</Text>
          <View style={styles.recoRow}>
            <Image source={{ uri: ICONS_BASE64.star }} style={styles.recoIcon} />
            <Text style={styles.recoText}>轻快午后 · 悠扬旋律</Text>
          </View>
          <View style={styles.recoRow}>
            <Image source={{ uri: ICONS_BASE64.star }} style={styles.recoIcon} />
            <Text style={styles.recoText}>周末夜听 · 电音精选</Text>
          </View>
        </View>
      </ScrollView>
      {detailVisible && (
        <View style={styles.detailOverlay}>
          <View style={styles.detailPanel}>
            <View style={styles.detailHeader}>
              <Text style={styles.detailTitle}>{detailTitle}</Text>
              <TouchableOpacity onPress={onCloseDetail}>
                <Text style={styles.detailClose}>关闭</Text>
              </TouchableOpacity>
            </View>
            <View style={styles.detailBody}>
              <View style={styles.detailRow}>
                <Image source={{ uri: ICONS_BASE64.chart }} style={styles.detailIcon} />
                <Text style={styles.detailText}>上榜理由：播放量增长、收藏度较高。</Text>
              </View>
              <View style={styles.detailRow}>
                <Image source={{ uri: ICONS_BASE64.play }} style={styles.detailIcon} />
                <Text style={styles.detailText}>操作：播放试听或加入收藏清单。</Text>
              </View>
            </View>
            <View style={styles.detailFooter}>
              <TouchableOpacity style={styles.detailBtn} onPress={() => onPlay('随机试听')}>
                <Text style={styles.detailBtnText}>随机试听</Text>
              </TouchableOpacity>
              <TouchableOpacity style={[styles.detailBtn, styles.detailBtnPrimary]} onPress={() => Alert.alert('收藏', '已收藏该歌曲')}>
                <Text style={styles.detailBtnTextPrimary}>收藏</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      )}
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#fffefc' },
  header: { padding: 16, backgroundColor: '#ffffff', borderBottomWidth: 1, borderBottomColor: '#fde68a', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
  title: { fontSize: 18, fontWeight: 'bold', color: '#0f172a' },
  headerIcons: { flexDirection: 'row', alignItems: 'center' },
  headerEmoji: { fontSize: 18, marginLeft: 8 },
  headerIconImg: { width: 24, height: 24 },
  content: { padding: 16 },
  section: { backgroundColor: '#ffffff', borderRadius: 12, padding: 14, shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.08, shadowRadius: 2 },
  sectionAlt: { backgroundColor: '#fff7ed', borderRadius: 12, padding: 14, marginTop: 16 },
  sectionTitle: { fontSize: 16, fontWeight: 'bold', color: '#0f172a', marginBottom: 10 },
  row: { flexDirection: 'row', alignItems: 'center', paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: '#f3f4f6' },
  rank: { width: 20, textAlign: 'center', color: '#b45309', fontWeight: '700' },
  song: { flex: 1, fontSize: 13, color: '#0f172a', fontWeight: '600' },
  playAction: { fontSize: 11, color: '#b45309', backgroundColor: '#fde68a', paddingHorizontal: 8, paddingVertical: 4, borderRadius: 10 },
  recoRow: { flexDirection: 'row', alignItems: 'center', marginTop: 8 },
  recoIcon: { width: 18, height: 18, marginRight: 6 },
  recoText: { fontSize: 12, color: '#7c2d12' },
  detailOverlay: { position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.25)', justifyContent: 'center', alignItems: 'center', padding: 16 },
  detailPanel: { width: '100%', maxWidth: 420, backgroundColor: '#ffffff', borderRadius: 14, padding: 14, shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.12, shadowRadius: 4 },
  detailHeader: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
  detailTitle: { fontSize: 16, fontWeight: '700', color: '#0f172a' },
  detailClose: { fontSize: 12, color: '#b45309', backgroundColor: '#ffedd5', paddingHorizontal: 8, paddingVertical: 4, borderRadius: 10 },
  detailBody: { marginTop: 10 },
  detailRow: { flexDirection: 'row', alignItems: 'center', marginTop: 8 },
  detailIcon: { width: 18, height: 18, marginRight: 6 },
  detailText: { fontSize: 12, color: '#475569' },
  detailFooter: { flexDirection: 'row', justifyContent: 'flex-end', marginTop: 12 },
  detailBtn: { backgroundColor: '#f1f5f9', borderRadius: 10, paddingVertical: 8, paddingHorizontal: 12, marginRight: 8 },
  detailBtnPrimary: { backgroundColor: '#ffedd5' },
  detailBtnText: { fontSize: 12, color: '#334155', fontWeight: '600' },
  detailBtnTextPrimary: { fontSize: 12, color: '#b45309', fontWeight: '700' },
});

export default MusicCharts;

---

打包

接下来通过打包命令npn run harmony将reactNative的代码打包成为bundle，这样可以进行在开源鸿蒙OpenHarmony中进行使用。

打包之后再将打包后的鸿蒙OpenHarmony文件拷贝到鸿蒙的DevEco-Studio工程目录去：

最后运行效果图如下显示：

欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。