这篇技术博客将深入解析一个基于 React Native 实现的家庭药箱健康管理系统代码片段，重点关注其在鸿蒙跨端开发中的核心技术要点与最佳实践。我们将从架构设计理念、状态管理模式、UI 组件适配策略等多个维度，全面剖析这套代码如何实现真正的"一次编写，多端运行"。

在万物互联的时代背景下，HarmonyOS 作为华为推出的分布式操作系统，正在构建一个全新的全场景智慧生态。对于开发者而言，如何让现有的移动应用无缝适配这一新兴平台成为了亟待解决的技术挑战。本文将以一个家庭药箱健康管理应用的 React Native 实现为例，深入探讨其在鸿蒙生态系统中的跨端适配之道。

---

本文深入解析了基于React Native的家庭药箱健康管理系统在鸿蒙平台的跨端开发实践。系统采用React函数式组件和Hooks实现统一状态管理，通过Flexbox布局和动态样式适配多种鸿蒙设备。文章重点剖析了医疗色彩体系、药品分类系统、用药记录展示等核心功能模块，并探讨了如何利用鸿蒙的分布式特性实现医疗数据同步、智能用药提醒和安全分析。系统支持多用户管理和药品库存预警，通过对接鸿蒙健康服务实现更专业的家庭医疗体验。该方案展现了React Native在医疗类应用跨平台开发中的技术优势，为开发者提供了"一次编写，多端运行"的实践参考。

统一状态管理

该应用采用了 React 函数式组件配合 Hooks 的现代开发模式，其中 useState Hook 扮演着至关重要的角色。通过定义 sel 状态变量来跟踪用户当前选中的药品分类，实现了组件内部状态的精细化管理。这种基于状态驱动的 UI 更新机制天然契合鸿蒙系统的响应式设计理念，无论是在手机、平板还是其他搭载 HarmonyOS 的智能设备上，都能确保用户交互的一致性体验。

值得注意的是，代码中使用的 Alert 组件属于 React Native 提供的跨平台 API，在鸿蒙环境下会被桥接到原生的弹窗实现，这充分体现了 React Native 抽象层的强大威力。开发者无需关心底层平台的具体实现细节，只需专注于业务逻辑本身，便可获得媲美原生应用的性能表现。

通过对 StyleSheet 创建的样式对象进行动态合并（如 {…styles.container, backgroundColor: t.bg}），实现了样式的灵活配置。这种策略在面对鸿蒙设备多样化屏幕密度和分辨率时显得尤为重要，能够确保应用在不同硬件规格下都呈现出理想的视觉效果。

栅格系统

药品分类区域采用了经典的栅格布局设计，通过 TouchableOpacity 组件包装每一个分类项，实现了触控反馈和状态联动的完美结合。当选中某个分类时，组件会动态改变边框颜色、背景色以及图标着色，这种细腻的交互反馈大大增强了用户的操作感知。

在鸿蒙跨端适配过程中，这种基于 Flexbox 的弹性布局方案展现出了卓越的适应能力。无论是竖屏手持设备的小尺寸界面，还是横屏大屏设备的宽阔视野，都能自动调整元素排布以达到最佳展示效果。

图像资源

尽管当前代码使用了 Base64 编码的占位图，但这并不影响其在鸿蒙平台上的正常运行。实际上，React Native 的 Image 组件支持多种图片加载方式，包括网络图片、本地资源以及 Base64 数据 URI。在生产环境中，开发者完全可以根据不同部署场景选择最合适的图片加载策略，以平衡应用体积与加载性能之间的关系。

更重要的是，通过 tintColor 属性对图标进行着色处理展现了 React Native 在图像渲染方面的强大能力。这项技术可以让开发者用最少的资源实现最多的视觉变化，这对于降低应用包体积、提高渲染效率具有重要意义。

用户体验

滚动容器（ScrollView）的使用体现了对长内容展示场景的周到考虑。配合 contentContainerStyle 属性对内容区域进行精确的样式控制，确保了滚动过程的流畅性和视觉连贯性。在鸿蒙设备上，这种优化对于提升帧率稳定性、减少掉帧现象发挥着关键作用。

底部的操作按钮组（月度汇总、导出历史、用药提醒）采用了水平排列的设计模式，通过不同背景色区分功能重要性等级。这种直观的视觉层次有助于引导用户完成核心操作，体现了以用户为中心的设计哲学。

---

家庭医疗色彩体系

药箱应用建立了清晰且安全的医疗色彩系统：

const PALETTE = {
  bg: '#f7fbff',
  card: '#ffffff',
  primary: '#0ea5e9',
  accent: '#22c55e',
  textMain: '#0b1021',
  textSub: '#4b5563',
  muted: '#e5e7eb'
};

这种色彩系统在医疗应用中展现了重要的信息层次价值。通过冷静的蓝色主色调、活力的绿色强调色和清晰的对比度，既保持了医疗专业性又提供了友好的家庭医疗体验。在鸿蒙平台上，这种设计可以无缝对接鸿蒙的健康服务视觉系统，实现跨设备的统一医疗数据展示。

紧凑的状态管理

应用实现了高效的药品选择状态管理：

const [sel, setSel] = useState(null);
const pick = (n) => {
  setSel(n);
  Alert.alert('类别选择', `已选择：${n}`);
};

这种状态管理在家庭医疗中展现了重要的药品分类能力。通过简洁的状态更新、即时反馈和语义化选择确认，提供了清晰的药品分类体验。在跨平台开发中，需要特别注意医疗数据的安全性和隐私保护。鸿蒙平台的安全服务可以提供更严格的医疗数据保护和更安全的用户隐私保障。

药品管理功能架构

结构化药品分类系统

组件采用了清晰的药品分类体系：

<TouchableOpacity 
  style={sel==='感冒药'?{...styles.gridItem,borderColor:'#0ea5e9',backgroundColor:'#f0f9ff'}:styles.gridItem} 
  onPress={()=>pick('感冒药')}
>
  <Image source={{uri:ICON}} style={{...styles.iconImg,tintColor:'#0ea5e9'}}/>
  <Text style={gridLabelStyle}>感冒药</Text>
</TouchableOpacity>

这种分类系统在药品管理中展现了重要的医疗组织能力。通过标准药品分类、视觉反馈和颜色编码，提供了直观的药品导航体验。在跨平台开发中，需要特别注意药品术语的准确性和医疗合规性。鸿蒙平台的医疗库可以提供更标准的药品分类体系和更安全的用药指导。

医疗记录结构化展示

应用实现了严谨的用药历史记录：

<View style={styles.recordRow}>
  <View style={styles.recordLeft}>
    <Image source={{uri:ICON}} style={{...styles.recordIcon,tintColor:'#0ea5e9'}}/>
    <View style={styles.recordTextBox}>
      <Text style={styles.recordTitle}>感冒药 · 2 片</Text>
      <Text style={styles.recordSub}>2026-01-02 · 早</Text>
    </View>
  </View>
  <TouchableOpacity style={{...styles.recordBtn,borderColor:'#0ea5e9'}}>
    <Text style={{...styles.recordBtnText,color:'#0ea5e9'}}>查看</Text>
  </TouchableOpacity>
</View>

这种记录系统在医疗应用中展现了重要的数据追溯价值。通过清晰的药品信息、精确的用药时间和完整的操作记录，确保了医疗数据的完整性和可审计性。在鸿蒙平台上，这种设计可以对接鸿蒙的健康数据模型，实现更专业的医疗记录管理和更丰富的用药分析。

鸿蒙跨端适配关键技术

分布式医疗数据同步

鸿蒙的分布式特性为家庭药箱带来创新体验：

// 伪代码：分布式医疗同步
const DistributedMedicine = {
  syncMedicationRecords: (medData) => {
    if (Platform.OS === 'harmony') {
      harmonyNative.syncMedicineData(medData);
    }
  },
  getCrossDeviceRecords: () => {
    if (Platform.OS === 'harmony') {
      return harmonyNative.getUnifiedMedRecords();
    }
    return localRecords;
  }
};

智能用药提醒

利用鸿蒙的原生提醒能力提升用药安全：

// 伪代码：智能提醒
const IntelligentMedReminders = {
  setupMedicationSchedule: () => {
    if (Platform.OS === 'harmony') {
      harmonyNative.createMedicationReminders();
    }
  },
  adjustDosageByCondition: () => {
    if (Platform.OS === 'harmony') {
      harmonyNative.adaptToHealthCondition();
    }
  }
};

医疗安全分析

鸿蒙平台为医疗应用提供安全分析能力：

// 伪代码：安全分析
const MedicalSafetyAnalytics = {
  detectDrugInteractions: () => {
    if (Platform.OS === 'harmony') {
      harmonyNative.analyzeMedicationSafety();
    }
  },
  provideUsageWarnings: () => {
    if (Platform.OS === 'harmony') {
      harmonyNative.generateSafetyAlerts();
    }
  }
};

家庭医疗场景优化

多用户药品管理

应用支持家庭多用户的药品管理：

<View style={styles.statRow}>
  <View style={styles.statItem}>
    <Text style={styles.statText}>历史记录</Text>
    <Text style={styles.statValue}>24</Text>
  </View>
  <View style={styles.statItem}>
    <Text style={styles.statText}>用药次数</Text>
    <Text style={styles.statValue}>78</Text>
  </View>
</View>

这种管理功能在家庭应用中展现了重要的多用户支持价值。通过汇总统计、个人记录和家庭视图，提供了全面的家庭健康管理体验。在鸿蒙平台上，这种设计可以对接鸿蒙的家庭服务，实现更智能的家庭健康共享和更安全的权限管理。

药品库存预警

// 伪代码：库存预警
const MedicineInventory = {
  monitorStockLevels: () => {
    if (Platform.OS === 'harmony') {
      harmonyNative.trackMedicineInventory();
    }
  },
  autoReorderMedication: () => {
    if (Platform.OS === 'harmony') {
      harmonyNative.initiateRefillProcess();
    }
  }
};

智能用药指导

// 伪代码：智能指导
const IntelligentMedication = {
  provideUsageInstructions: () => {
    if (Platform.OS === 'harmony') {
      harmonyNative.generateMedicationGuide();
    }
  },
  suggestAlternativeMeds: () => {
    if (Platform.OS === 'harmony') {
      harmonyNative.recommendAlternatives();
    }
  }
};

医疗专业连接

// 伪代码：医疗连接
const MedicalIntegration = {
  connectWithPharmacies: () => {
    if (Platform.OS === 'harmony') {
      harmonyNative.linkToPharmacyServices();
    }
  },
  shareWithDoctors: () => {
    if (Platform.OS === 'harmony') {
      harmonyNative.provideDoctorReports();
    }
  }
};

---

这段页面以一个函数式组件完成了“概览—分类—历史列表—页脚”的完整信息流，完全使用 React Native 的内置能力：SafeAreaView、ScrollView、View、Text、Image、TouchableOpacity 与 Alert。没有第三方依赖，意味着它具备极好的跨端可移植性。在鸿蒙（OpenHarmony/HarmonyOS）环境，只要提供 React Native 渲染桥将 RN 的抽象组件映射到 ArkUI，并用 Hermes 或 JSCore 执行 JavaScript，就能获得与 iOS/Android 近似一致的 UI 与交互表现。

布局结构

根容器使用 SafeAreaView，以保证在刘海屏与异形屏上的安全显示。内容区由 ScrollView 承载，contentContainerStyle 用统一内边距组织所有分区。头部简洁呈现标题与副标题，卡片化的“总体概览”与“药品分类”以统一的圆角和阴影风格传递层级，列表区将历史记录以“图标 + 文本 + 操作按钮”的横向排布呈现，页脚总结版权与风格标签。这样的分层符合移动端信息架构惯例，ArkUI 在鸿蒙端对这些基础容器与文本、图片、手势的映射都很成熟，能够保证结构与交互语义的一致。

自适应

“药品分类”采用像素级四列栅格：(width - 162 - 123) / 4，将屏幕宽度、两侧内边距与列间距纳入统一公式，得到稳定的卡片宽度。相比“百分比宽度 + flex 平分”，这种策略在不同平台与屏幕密度下更可控，避免由于布局引擎细微差异导致的断行或不齐。选中态以边框色与淡底色强调状态，不依赖复杂阴影，使视觉在 iOS/Android/鸿蒙端更容易保持一致。Dimensions.get(‘window’) 的宽度在 RN→ArkUI 的桥接层稳定可靠，鸿蒙端同样能正确解析并参与布局计算。

图标

图标使用 base64 内联图片并通过 tintColor 着色，配合圆角实现轻量的多色图标体系。tintColor 在 RN 中对 iOS/Android 有成熟支持（ColorFilter 等），鸿蒙端的 ArkUI 适配通常也提供颜色过滤能力，因此无需专用图标库即可构建统一色系的栅格与列表表现。若对品牌统一性与缩放清晰度要求更高，可以迁移到 Vector/SVG 图标方案，以获得在三端更稳定的细节呈现。

状态管理

组件以 useState 管理分类选中态 sel。交互入口统一为 pick 与若干 Alert 弹窗，所有反馈都走系统弹窗抽象，以确保跨端一致性：RN 将 Alert 映射到各平台原生对话框，鸿蒙端由 ArkUI 对话框承载。按钮用 TouchableOpacity 表达点击语义，结构简单、可移植性好；如果需要更细腻的触控反馈（涟漪、按压态或长按逻辑），可以在后续改用 Pressable 并为各平台配置统一反馈策略，鸿蒙端会映射到 ArkUI 的手势系统。

阴影

卡片采用“弱阴影 + 强圆角 + 边框语义”维持层次。阴影是常见的跨端差异点：iOS 的 shadow 系列属性在 Android/鸿蒙端更接近 elevation 或等效计算，呈现可能有细微不同。将层次感主要交给圆角、边框与色彩，而不是依赖复杂阴影，是一种稳健的跨端策略，能显著降低视觉不一致的风险。

动画

当前页面不含动画，计算量极低，渲染路径短，性能开销非常小。工程化方面，建议将主题提升为 Design Token/Context；将“概览卡片”“分类栅格项”“历史记录项”拆分为独立组件，明确属性边界与复用点；将“计算型样式”（例如选中态边框色、淡底色）与交互反馈做轻微动效，使用 Animated 并启用 useNativeDriver，让透明度、位移等动效走原生驱动，在鸿蒙设备上获得更稳定的帧时间与更低的 JS 线程占用。事件处理函数可用 useCallback 包装，交互子组件做成纯组件以减少重渲染。

数据层可先以 AsyncStorage 实现轻度持久化（如保存最近一次选中的分类与历史浏览位置），迁移到鸿蒙时替换为 Preferences 或 DataAbility，完成端上存储与数据读写。如果涉及系统通知或提醒，可抽象统一的提醒模块，鸿蒙端映射到 ArkUI/系统的通知与定时能力，保证跨端的一致行为。

---

真实演示案例代码：

import React, { useState } from 'react';
import { SafeAreaView, View, Text, StyleSheet, TouchableOpacity, ScrollView, Image, Dimensions, Alert } from 'react-native';
const PALETTE={bg:'#f7fbff',card:'#ffffff',primary:'#0ea5e9',accent:'#22c55e',textMain:'#0b1021',textSub:'#4b5563',muted:'#e5e7eb'};
const ICON='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAusB9YpW2XcAAAAASUVORK5YII=';
const App=()=>{const t=PALETTE;const [sel,setSel]=useState(null);const pick=(n)=>{setSel(n);Alert.alert('类别选择',`已选择：${n}`);} ;
const containerStyle={...styles.container,backgroundColor:t.bg};const cardStyle={...styles.card,backgroundColor:t.card};const titleStyle={...styles.title,color:t.textMain};const subtitleStyle={...styles.subtitle,color:t.textSub};const gridLabelStyle={...styles.gridLabel,color:t.textMain};const footerTextStyle={...styles.footerText,color:t.textSub};
return(<SafeAreaView style={containerStyle}><ScrollView contentContainerStyle={styles.content}>
<View style={styles.header}><Text style={titleStyle}>家庭药箱 · 健康历史</Text><Text style={subtitleStyle}>晴空蓝与活力绿 · 历史与分类</Text></View>
<View style={cardStyle}><Text style={styles.cardTitle}>总体概览</Text><View style={styles.statRow}>
<View style={styles.statItem}><Text style={styles.statText}>历史记录</Text><Text style={styles.statValue}>24</Text></View>
<View style={styles.statItem}><Text style={styles.statText}>用药次数</Text><Text style={styles.statValue}>78</Text></View>
<View style={styles.statItem}><Text style={styles.statText}>最近更新</Text><Text style={styles.statValue}>2026-01-12</Text></View>
</View>
<View style={styles.actionsRow}><TouchableOpacity style={{...styles.action,backgroundColor:'#0ea5e9'}} onPress={()=>Alert.alert('操作','查看月度汇总')}><Text style={styles.actionText}>月度汇总</Text></TouchableOpacity>
<TouchableOpacity style={{...styles.action,backgroundColor:'#22c55e'}} onPress={()=>Alert.alert('操作','导出历史')}><Text style={styles.actionText}>导出历史</Text></TouchableOpacity>
<TouchableOpacity style={{...styles.action,backgroundColor:'#f59e0b'}} onPress={()=>Alert.alert('操作','用药提醒')}><Text style={styles.actionText}>用药提醒</Text></TouchableOpacity></View></View>
<View style={cardStyle}><Text style={styles.cardTitle}>药品分类</Text><View style={styles.grid}>
<TouchableOpacity style={sel==='感冒药'?{...styles.gridItem,borderColor:'#0ea5e9',backgroundColor:'#f0f9ff'}:styles.gridItem} onPress={()=>pick('感冒药')}><Image source={{uri:ICON}} style={{...styles.iconImg,tintColor:'#0ea5e9'}}/><Text style={gridLabelStyle}>感冒药</Text></TouchableOpacity>
<TouchableOpacity style={sel==='止痛药'?{...styles.gridItem,borderColor:'#22c55e',backgroundColor:'#f0fff4'}:styles.gridItem} onPress={()=>pick('止痛药')}><Image source={{uri:ICON}} style={{...styles.iconImg,tintColor:'#22c55e'}}/><Text style={gridLabelStyle}>止痛药</Text></TouchableOpacity>
<TouchableOpacity style={sel==='消化药'?{...styles.gridItem,borderColor:'#f59e0b',backgroundColor:'#fffbeb'}:styles.gridItem} onPress={()=>pick('消化药')}><Image source={{uri:ICON}} style={{...styles.iconImg,tintColor:'#f59e0b'}}/><Text style={gridLabelStyle}>消化药</Text></TouchableOpacity>
<TouchableOpacity style={sel==='外用药'?{...styles.gridItem,borderColor:'#06b6d4',backgroundColor:'#f0f9ff'}:styles.gridItem} onPress={()=>pick('外用药')}><Image source={{uri:ICON}} style={{...styles.iconImg,tintColor:'#06b6d4'}}/><Text style={gridLabelStyle}>外用药</Text></TouchableOpacity>
<TouchableOpacity style={sel==='抗过敏'?{...styles.gridItem,borderColor:'#a78bfa',backgroundColor:'#f5f3ff'}:styles.gridItem} onPress={()=>pick('抗过敏')}><Image source={{uri:ICON}} style={{...styles.iconImg,tintColor:'#a78bfa'}}/><Text style={gridLabelStyle}>抗过敏</Text></TouchableOpacity>
<TouchableOpacity style={sel==='维生素'?{...styles.gridItem,borderColor:'#f472b6',backgroundColor:'#fdf2f8'}:styles.gridItem} onPress={()=>pick('维生素')}><Image source={{uri:ICON}} style={{...styles.iconImg,tintColor:'#f472b6'}}/><Text style={gridLabelStyle}>维生素</Text></TouchableOpacity>
<TouchableOpacity style={sel==='抗炎类'?{...styles.gridItem,borderColor:'#ef4444',backgroundColor:'#fee2e2'}:styles.gridItem} onPress={()=>pick('抗炎类')}><Image source={{uri:ICON}} style={{...styles.iconImg,tintColor:'#ef4444'}}/><Text style={gridLabelStyle}>抗炎类</Text></TouchableOpacity>
<TouchableOpacity style={sel==='其他'?{...styles.gridItem,borderColor:'#fbbf24',backgroundColor:'#fffbeb'}:styles.gridItem} onPress={()=>pick('其他')}><Image source={{uri:ICON}} style={{...styles.iconImg,tintColor:'#fbbf24'}}/><Text style={gridLabelStyle}>其他</Text></TouchableOpacity>
</View></View>
<View style={cardStyle}><Text style={styles.cardTitle}>历史列表</Text>
<View style={styles.recordRow}><View style={styles.recordLeft}><Image source={{uri:ICON}} style={{...styles.recordIcon,tintColor:'#0ea5e9'}}/><View style={styles.recordTextBox}><Text style={styles.recordTitle}>感冒药 · 2 片</Text><Text style={styles.recordSub}>2026-01-02 · 早</Text></View></View><TouchableOpacity style={{...styles.recordBtn,borderColor:'#0ea5e9'}} onPress={()=>Alert.alert('查看','感冒药记录')}><Text style={{...styles.recordBtnText,color:'#0ea5e9'}}>查看</Text></TouchableOpacity></View>
<View style={styles.recordRow}><View style={styles.recordLeft}><Image source={{uri:ICON}} style={{...styles.recordIcon,tintColor:'#22c55e'}}/><View style={styles.recordTextBox}><Text style={styles.recordTitle}>止痛药 · 1 片</Text><Text style={styles.recordSub}>2026-01-05 · 晚</Text></View></View><TouchableOpacity style={{...styles.recordBtn,borderColor:'#22c55e'}} onPress={()=>Alert.alert('查看','止痛药记录')}><Text style={{...styles.recordBtnText,color:'#22c55e'}}>查看</Text></TouchableOpacity></View>
<View style={styles.recordRow}><View style={styles.recordLeft}><Image source={{uri:ICON}} style={{...styles.recordIcon,tintColor:'#f59e0b'}}/><View style={styles.recordTextBox}><Text style={styles.recordTitle}>消化药 · 10 ml</Text><Text style={styles.recordSub}>2026-01-09 · 中</Text></View></View><TouchableOpacity style={{...styles.recordBtn,borderColor:'#f59e0b'}} onPress={()=>Alert.alert('查看','消化药记录')}><Text style={{...styles.recordBtnText,color:'#f59e0b'}}>查看</Text></TouchableOpacity></View>
</View>
<View style={styles.footer}><Text style={footerTextStyle}>© 家庭药箱 · 健康历史</Text></View>
</ScrollView></SafeAreaView>);};
const {width}=Dimensions.get('window');
const styles=StyleSheet.create({container:{flex:1},content:{padding:16},header:{paddingVertical:16,alignItems:'center'},title:{fontSize:26,fontWeight:'800'},subtitle:{fontSize:13,marginTop:6},card:{borderRadius:16,padding:16,marginBottom:14,shadowColor:'#000',shadowOpacity:0.06,shadowRadius:8,shadowOffset:{width:0,height:4}},cardTitle:{fontSize:18,fontWeight:'700',marginBottom:10},statRow:{flexDirection:'row'},statItem:{flex:1},statText:{fontSize:12},statValue:{fontSize:16,fontWeight:'700',marginTop:4},actionsRow:{flexDirection:'row',justifyContent:'space-between',marginTop:12},action:{flex:1,borderRadius:12,paddingVertical:10,alignItems:'center',marginRight:10},actionText:{color:'#ffffff',fontSize:14,fontWeight:'600'},grid:{flexDirection:'row',flexWrap:'wrap',justifyContent:'space-between'},gridItem:{width:(width-16*2-12*3)/4,borderWidth:1,borderColor:'#e2e8f0',borderRadius:14,paddingVertical:14,alignItems:'center',marginBottom:12,backgroundColor:'#ffffff'},iconImg:{width:28,height:28,borderRadius:14,marginBottom:8},gridLabel:{fontSize:12,fontWeight:'600'},recordRow:{flexDirection:'row',justifyContent:'space-between',alignItems:'center',paddingVertical:10,borderBottomWidth:1,borderBottomColor:'#f1f5f9'},recordLeft:{flexDirection:'row',alignItems:'center'},recordIcon:{width:30,height:30,borderRadius:15},recordTextBox:{marginLeft:10},recordTitle:{fontSize:14,fontWeight:'700'},recordSub:{fontSize:12,marginTop:2},recordBtn:{borderWidth:1,borderRadius:999,paddingHorizontal:10,paddingVertical:4},recordBtnText:{fontSize:12,fontWeight:'600'},footer:{paddingVertical:14,alignItems:'center'},footerText:{fontSize:12}});
export default App;

---

打包

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

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

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

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