本文是基于HarmonyOS API 24的进行的ReactNative 鸿蒙跨平台开发依托适配鸿蒙的 RN 运行层，使用 React 与 JS 编写一套业务代码，无需大量 ArkTS 原生开发，通用业务实现代码复用，支持按需扩展原生桥调用鸿蒙特有能力，有效降低多平台开发维护成本。

ReactNative 鸿蒙跨平台开发，简单来说就是基于 ReactNative 技术栈，依托鸿蒙平台适配层，使用 JavaScript 与 React 语法编写一套业务代码，经过编译适配后同时支撑鸿蒙应用、安卓、iOS 等多端运行的开发方案。开发者沿用前端熟悉的组件化、状态管理等 React 开发范式，不用分别针对鸿蒙原生 ArkTS、安卓原生、iOS 原生独立实现相同业务逻辑，依靠桥接层完成 JS 逻辑与鸿蒙原生能力的通信，调用鸿蒙的窗口、媒体、设备硬件等系统接口，最终打包生成鸿蒙应用安装包，兼顾开发效率与多端复用能力，同时也存在部分鸿蒙特有系统能力需要编写原生桥模块进行扩展适配，复杂交互、高性能场景下要权衡跨平台通用方案与原生开发的取舍。

ReactNative 鸿蒙跨平台开发优势：

• 1.前端开发者直接复用已有的 React 开发经验与存量业务代码，一套代码可同时产出鸿蒙、安卓、iOS 多端应用，大幅降低多平台分别开发、维护的人力与时间成本，迭代更新时多数业务改动只需修改一处代码就能同步生效
• 2.借助 JS 热更新机制还能绕过应用商店快速推送功能修复与轻度版本变更
• 3.依托成熟的 React 生态，海量第三方组件、工具库可以直接接入，不用从零适配鸿蒙原生开发体系，上手门槛更低
• 4.熟悉网页与 React 技术的开发人员可以快速转型参与鸿蒙应用建设；
• 5.框架内置 JS 与原生的通信桥，基础 UI、网络、存储等通用设备能力开箱可用

大部分常规业务场景无需编写原生扩展模块，同时支持按需开发鸿蒙原生桥接模块调用系统独有能力，在跨端复用和平台特性之间保留灵活平衡，相比纯原生多端开发，团队可以更快完成产品落地，适合业务频繁迭代、需要同时覆盖多终端的中小型应用场景。

–

概述

本文分析的是一个基于React Native构建的群文件共享应用，集成了文件管理、文件夹组织、统计展示等核心功能。该应用采用了多类型文件支持、选项卡式界面设计和实时统计计算，展现了文件管理类应用的典型技术架构。在鸿蒙OS的跨端适配场景中，这种涉及文件操作和分类管理的应用具有重要的技术参考价值。

核心架构设计深度解析

多类型文件数据结构

应用定义了完整的文件数据模型：

type FileItem = {
  id: string;
  name: string;
  type: 'document' | 'image' | 'video' | 'audio' | 'other';
  size: string;
  uploadedBy: string;
  uploadedAt: string;
  downloadCount: number;
  sharedWith: number;
};

这种数据结构设计体现了文件管理的核心维度：基础信息（名称、类型、大小）、上传信息（上传者、时间）、互动数据（下载次数、分享人数）。type字段使用联合类型确保文件类型的安全性，size字段采用字符串格式便于显示。

在鸿蒙ArkUI体系中，接口定义保持了相同的结构：

interface FileItem {
  id: string;
  name: string;
  type: 'document' | 'image' | 'video' | 'audio' | 'other';
  size: string;
  uploadedBy: string;
  uploadedAt: string;
  downloadCount: number;
  sharedWith: number;
}

文件类型图标系统

FileItemCard组件实现了动态文件类型图标：

const getFileIcon = () => {
  switch (file.type) {
    case 'image': return ICONS.image;
    case 'video': return ICONS.video;
    case 'document': return ICONS.document;
    default: return ICONS.file;
  }
};

这种设计采用了映射关系模式，通过switch-case实现文件类型到图标的精确匹配。默认分支处理未知类型，确保了系统的健壮性。图标选择采用了直观的视觉符号：文档用📝、图片用🖼️、视频用🎬。

鸿蒙的实现需要将逻辑函数转换为计算属性：

@Component
struct FileItemCard {
  @Prop file: FileItem;
  
  get fileIcon(): string {
    switch (this.file.type) {
      case 'image': return '🖼️';
      case 'video': return '🎬';
      case 'document': return '??';
      default: return '📄';
    }
  }
  
  build() {
    Column() {
      Text(this.fileIcon)
      Text(this.file.name)
    }
  }
}

选项卡式界面设计

应用实现了灵活的双选项卡界面：

const [activeTab, setActiveTab] = useState<'files' | 'folders'>('files');

{activeTab === 'files' ? (
  <FlatList
    data={files}
    renderItem={({ item }) => <FileItemCard file={item} />}
  />
) : (
  <FlatList
    data={folders}
    renderItem={({ item }) => <FolderCard name={item.name} fileCount={item.fileCount} />}
  />
)}

这种设计采用了条件渲染技术，通过activeTab状态控制显示内容。类型守卫确保了状态值的类型安全，三元运算符实现了简洁的条件逻辑。两个FlatList组件共享相同的容器但显示不同的内容。

鸿蒙的实现采用条件渲染结构：

@State activeTab: string = 'files';

build() {
  Column() {
    if (this.activeTab === 'files') {
      List() {
        ForEach(this.files, (file: FileItem) => {
          FileItemCard({ file: file })
        })
      }
    } else {
      List() {
        ForEach(this.folders, (folder: Folder) => {
          FolderCard({ name: folder.name, fileCount: folder.fileCount })
        })
      }
    }
  }
}

实时统计计算系统

应用实现了基于reduce的统计计算：

<View style={styles.statsContainer}>
  <View style={styles.statItem}>
    <Text style={styles.statNumber}>{files.length}</Text>
    <Text style={styles.statLabel}>文件总数</Text>
  </View>
  <View style={styles.statItem}>
    <Text style={styles.statNumber}>
      {files.reduce((sum, file) => sum + file.downloadCount, 0)}
    </Text>
    <Text style={styles.statLabel}>总下载次数</Text>
  </View>
  <View style={styles.statItem}>
    <Text style={styles.statNumber}>{folders.length}</Text>
    <Text style={styles.statLabel}>文件夹</Text>
  </View>
</View>

这种统计设计采用了函数式编程模式，reduce方法实现了下载次数的累加计算。数组length属性提供了直接的数量统计。三个统计项形成了完整的数据概览。

鸿蒙的实现采用计算属性模式：

@State files: FileItem[] = [];
@State folders: Folder[] = [];

get totalDownloads(): number {
  return this.files.reduce((sum, file) => sum + file.downloadCount, 0);
}

build() {
  Row() {
    Column() {
      Text(this.files.length.toString())
      Text('文件总数')
    }
    Column() {
      Text(this.totalDownloads.toString())
      Text('总下载次数')
    }
    Column() {
      Text(this.folders.length.toString())
      Text('文件夹')
    }
  }
}

跨端适配技术方案

组件映射策略

React Native组件	鸿蒙ArkUI组件	关键适配点
FlatList	List	列表实现和性能优化
TouchableOpacity	Button	交互反馈机制不同
View	Column/Row/Stack	布局系统转换

样式系统转换

// React Native
fileCard: {
  backgroundColor: '#ffffff',
  borderRadius: 12,
  padding: 16,
  elevation: 1,
},

// 鸿蒙
Column()
  .backgroundColor(Color.White)
  .borderRadius(12)
  .padding(16)
  .shadow({ radius: 2 })

性能优化与最佳实践

列表渲染优化

配置keyExtractor提升列表性能：

<FlatList
  data={files}
  keyExtractor={item => item.id}
  renderItem={({ item }) => <FileItemCard file={item} />}
/>

统计计算优化

使用useMemo避免重复计算：

const totalDownloads = useMemo(() => {
  return files.reduce((sum, file) => sum + file.downloadCount, 0);
}, [files]);

总结与实施建议

这个React Native群文件共享应用展示了文件管理类应用的典型技术架构，其多类型文件支持、选项卡式界面和实时统计为鸿蒙跨端适配提供了优秀的基础。

---

数据契约与展示协议

• FileItem 把文件的“身份与元数据”浓缩为 type、size、uploadedBy、uploadedAt、downloadCount、sharedWith 等字段，适合列表化渲染与操作回调。为了跨端保持排序与格式一致，size 与 uploadedAt更适合存储为“原始数值”（字节与时间戳/ISO），展示层根据区域化规则进行格式化，这样 React Native 与鸿蒙端共享同一展示协议，避免字符串排序与多语言差异带来的不确定性。
• 文件类型使用联合类型限定 document/image/video/audio/other，getFileIcon 做语义到图标的派生映射。跨端要将这一映射上移为“资源抽象层”，RN 侧采用矢量资源或字体图标库，鸿蒙侧做 ArkUI 等价映射，保证大小、颜色、无障碍标签的一致。

组件语义与边界

• FileItemCard 清晰划分“信息区 + 操作区”，下载与分享通过 onDownload/onShare 以“动作语义”上推到页面。FolderCard 保持 onOpen 的纯点击语义。这种“上推动作、下沉样式”的分层是跨端桥接的核心：页面只关心业务意图，平台能力在桥接层实现。
• 顶部上传入口在代码中作为占位行为，生产实现建议抽象成“上传服务”，在 RN 暴露统一 API（例如 upload(files, targetFolder)），鸿蒙侧承担文件选择器、权限、分片与断点续传、前后台任务与失败重试等具体能力。

列表虚拟化与滚动调优

• 文件与文件夹分别由两个 FlatList 承载，并用 ListHeaderComponent 衔接统计文案。跨端要关注滚动物理差异与绘制成本，建议启用 removeClippedSubviews、windowSize、initialNumToRender，并在尺寸可预测时提供 getItemLayout，降低长列表内存占用与卡顿。
• keyExtractor 使用 id 保证稳定复用；renderItem 保持纯函数；统计派生值（如总下载次数）用 useMemo 基于 files 计算；事件处理器通过 useCallback 固定引用，减少子项无效重渲染。这些优化在鸿蒙桥接场景下能显著降低跨层事件与 UI 刷新频率。

下载、分享与上传的能力抽象

• 下载能力在 RN 端可走原生下载器或 Linking；鸿蒙端建议封装为“下载能力服务”，统一输入 fileId/目标路径，输出进度、完成与错误事件，并支持前后台与通知栏进度展示。页面只订阅状态并渲染，不直接操纵平台细节。
• 分享能力构建“分享协议对象”（title、description、mime、source：本地路径/远程 URL/数据缓冲区），RN 与鸿蒙分别实现 ShareSheet/系统分享；大文件分享应先本地缓存再分享，避免纯 URL 分享失败。
• 上传能力统一处理文件选择器、权限申请（媒体库/相册/存储）、分片与断点续传、网络切换与重试；桥接层负责队列与事务语义，页面只关心“开始/进度/完成/失败”的状态流。

权限、存储与隐私的工程边界

• 文件读写是敏感能力，鸿蒙侧需要显式权限申请与最小化访问原则。把权限弹窗与失败兜底封装在能力服务层，组件只呈现友好提示。下载/分享生成的临时文件要有路径隔离与生命周期治理，防止泄露或脏缓存。
• 统计与埋点避免直接上报敏感文件名与个人信息，采用匿名化或脱敏协议，跨端合规一致。

可靠性与事务语义

• 下载/上传采用“乐观 UI + 后端确认”的模式：开始即显示进度与排队，失败明确原因并提供重试。批量任务走队列语义，支持暂停、恢复与取消；桥接层暴露事件流，页面订阅状态即可。
• 分享失败提供备用路径（例如复制链接），避免用户陷入“操作无响应”的黑盒体验。

国际化与格式一致性

• 时间与大小应由统一格式器输出。时间戳转“今天/昨天/前天 + 时分”或“相对时间”要考虑 locale 与时区；大小以字节为基，统一到 KB/MB/GB 与小数位。保证 RN 与鸿蒙端通过同一格式策略渲染，避免双端出现微小差异。

图标与资源一致性

• 代码以 emoji 图标占位，跨端渲染存在不可控差异。建议统一到矢量资源或可控字体图标，并在抽象层维护语义到资源的映射表；在 ArkUI 侧做对等映射，包含可访问描述，保证辅助技术可读。

可观测性与测试策略

• 为下载/上传/分享/打开文件夹等动作定义统一事件名与属性协议（file_id、size_bytes、mime、duration_ms、result），跨端聚合分析性能与失败率，识别瓶颈与异常。
• 契约测试覆盖“页面动作 → 能力服务调用 → 桥接结果回传 → UI 同步”的链路；长列表滚动与进度上报做阈值与节流测试，避免事件风暴；错误语义要一致并可重试。

关键片段的语义亮点

• getFileIcon 将业务类型映射为视觉语义，是资源抽象层的种子实现；在跨端落地时应以“类型 → 资源 id”的方式统一管理。
• 统计区以 reduce 聚合下载次数，这类派生数据建议用 useMemo 包装，依赖 files，减少重复计算；当 files 体量增大或频繁变更时尤为重要。
• 双选项卡以 activeTab 切分文件/文件夹列表，保持“数据源切换、渲染函数不变”的简洁语义。跨端路由统一后，选项卡切换可映射为“轻路由”的语义，配合返回手势与状态保存。
• 事件入口 onDownload/onShare/onOpen 使用 Alert 作为占位；生产环境统一替换为“能力服务层”，页面不直接操作平台能力，确保 RN 与鸿蒙在同一语义下保持一致行为。

---

真实案例代码：

// app.tsx
import React, { useState } from 'react';
import { SafeAreaView, View, Text, StyleSheet, TouchableOpacity, ScrollView, Dimensions, Alert, FlatList } from 'react-native';

// 图标库
const ICONS = {
  file: '📄',
  folder: '📁',
  download: '⬇️',
  share: '🔗',
  upload: '⬆️',
  image: '🖼️',
  video: '🎬',
  document: '📝',
};

const { width } = Dimensions.get('window');

// 文件类型
type FileItem = {
  id: string;
  name: string;
  type: 'document' | 'image' | 'video' | 'audio' | 'other';
  size: string;
  uploadedBy: string;
  uploadedAt: string;
  downloadCount: number;
  sharedWith: number;
};

// 文件项组件
const FileItemCard = ({ 
  file, 
  onDownload,
  onShare
}: { 
  file: FileItem; 
  onDownload: (id: string) => void;
  onShare: (id: string) => void;
}) => {
  const getFileIcon = () => {
    switch (file.type) {
      case 'image': return ICONS.image;
      case 'video': return ICONS.video;
      case 'document': return ICONS.document;
      default: return ICONS.file;
    }
  };

  return (
    <View style={styles.fileCard}>
      <View style={styles.fileHeader}>
        <View style={styles.fileIcon}>
          <Text style={styles.fileIconText}>{getFileIcon()}</Text>
        </View>
        <View style={styles.fileInfo}>
          <Text style={styles.fileName} numberOfLines={1}>{file.name}</Text>
          <Text style={styles.fileMeta}>{file.size} • 上传者: {file.uploadedBy}</Text>
          <Text style={styles.fileMeta}>{file.uploadedAt} • 下载: {file.downloadCount}次</Text>
        </View>
      </View>
      
      <View style={styles.fileActions}>
        <TouchableOpacity style={styles.actionButton} onPress={() => onDownload(file.id)}>
          <Text style={styles.actionIcon}>{ICONS.download}</Text>
          <Text style={styles.actionText}>下载</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.actionButton} onPress={() => onShare(file.id)}>
          <Text style={styles.actionIcon}>{ICONS.share}</Text>
          <Text style={styles.actionText}>分享</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

// 文件夹组件
const FolderCard = ({ 
  name, 
  fileCount, 
  onOpen 
}: { 
  name: string; 
  fileCount: number; 
  onOpen: () => void 
}) => {
  return (
    <TouchableOpacity style={styles.folderCard} onPress={onOpen}>
      <View style={styles.folderIcon}>
        <Text style={styles.folderIconText}>{ICONS.folder}</Text>
      </View>
      <View style={styles.folderInfo}>
        <Text style={styles.folderName}>{name}</Text>
        <Text style={styles.folderMeta}>{fileCount} 个文件</Text>
      </View>
    </TouchableOpacity>
  );
};

// 主页面组件
const GroupFileSharingApp: React.FC = () => {
  const [files, setFiles] = useState<FileItem[]>([
    {
      id: '1',
      name: '项目计划书.pdf',
      type: 'document',
      size: '2.4 MB',
      uploadedBy: '张经理',
      uploadedAt: '今天 10:30',
      downloadCount: 12,
      sharedWith: 24
    },
    {
      id: '2',
      name: '团队合影.jpg',
      type: 'image',
      size: '1.8 MB',
      uploadedBy: '李小红',
      uploadedAt: '昨天 16:45',
      downloadCount: 24,
      sharedWith: 28
    },
    {
      id: '3',
      name: '培训视频.mp4',
      type: 'video',
      size: '45.2 MB',
      uploadedBy: '王老师',
      uploadedAt: '前天 09:15',
      downloadCount: 8,
      sharedWith: 15
    },
    {
      id: '4',
      name: '会议纪要.docx',
      type: 'document',
      size: '0.5 MB',
      uploadedBy: '陈秘书',
      uploadedAt: '3天前 14:20',
      downloadCount: 18,
      sharedWith: 22
    },
    {
      id: '5',
      name: '产品演示.pptx',
      type: 'document',
      size: '8.7 MB',
      uploadedBy: '刘设计师',
      uploadedAt: '4天前 11:30',
      downloadCount: 32,
      sharedWith: 30
    }
  ]);

  const [folders] = useState([
    { id: 'f1', name: '项目文档', fileCount: 12 },
    { id: 'f2', name: '团队照片', fileCount: 24 },
    { id: 'f3', name: '培训资料', fileCount: 8 },
    { id: 'f4', name: '财务报表', fileCount: 6 }
  ]);

  const [activeTab, setActiveTab] = useState<'files' | 'folders'>('files');

  const handleDownload = (id: string) => {
    Alert.alert('下载文件', `正在下载文件: ${files.find(f => f.id === id)?.name}`);
  };

  const handleShare = (id: string) => {
    Alert.alert('分享文件', `分享文件: ${files.find(f => f.id === id)?.name} 给其他群成员`);
  };

  const openFolder = (folderName: string) => {
    Alert.alert('打开文件夹', `打开文件夹: ${folderName}`);
  };

  return (
    <SafeAreaView style={styles.container}>
      {/* 头部 */}
      <View style={styles.header}>
        <Text style={styles.title}>群文件共享</Text>
        <TouchableOpacity style={styles.uploadButton}>
          <Text style={styles.uploadText}>{ICONS.upload} 上传</Text>
        </TouchableOpacity>
      </View>

      {/* 统计信息 */}
      <View style={styles.statsContainer}>
        <View style={styles.statItem}>
          <Text style={styles.statNumber}>{files.length}</Text>
          <Text style={styles.statLabel}>文件总数</Text>
        </View>
        <View style={styles.statItem}>
          <Text style={styles.statNumber}>
            {files.reduce((sum, file) => sum + file.downloadCount, 0)}
          </Text>
          <Text style={styles.statLabel}>总下载次数</Text>
        </View>
        <View style={styles.statItem}>
          <Text style={styles.statNumber}>{folders.length}</Text>
          <Text style={styles.statLabel}>文件夹</Text>
        </View>
      </View>

      {/* 选项卡 */}
      <View style={styles.tabsContainer}>
        <TouchableOpacity 
          style={[styles.tabButton, activeTab === 'files' && styles.activeTabButton]} 
          onPress={() => setActiveTab('files')}
        >
          <Text style={[styles.tabText, activeTab === 'files' && styles.activeTabText]}>文件</Text>
        </TouchableOpacity>
        <TouchableOpacity 
          style={[styles.tabButton, activeTab === 'folders' && styles.activeTabButton]} 
          onPress={() => setActiveTab('folders')}
        >
          <Text style={[styles.tabText, activeTab === 'folders' && styles.activeTabText]}>文件夹</Text>
        </TouchableOpacity>
      </View>

      {/* 文件列表 */}
      {activeTab === 'files' ? (
        <FlatList
          data={files}
          keyExtractor={item => item.id}
          renderItem={({ item }) => (
            <FileItemCard
              file={item}
              onDownload={handleDownload}
              onShare={handleShare}
            />
          )}
          style={styles.filesList}
          showsVerticalScrollIndicator={false}
          ListHeaderComponent={
            <Text style={styles.sectionTitle}>共享文件 ({files.length})</Text>
          }
        />
      ) : (
        <FlatList
          data={folders}
          keyExtractor={item => item.id}
          renderItem={({ item }) => (
            <FolderCard
              name={item.name}
              fileCount={item.fileCount}
              onOpen={() => openFolder(item.name)}
            />
          )}
          style={styles.foldersList}
          showsVerticalScrollIndicator={false}
          ListHeaderComponent={
            <Text style={styles.sectionTitle}>文件夹 ({folders.length})</Text>
          }
        />
      )}

      {/* 底部导航 */}
      <View style={styles.bottomNav}>
        <TouchableOpacity style={styles.navItem}>
          <Text style={styles.navIcon}>{ICONS.folder}</Text>
          <Text style={styles.navText}>文件夹</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.navItem}>
          <Text style={styles.navIcon}>{ICONS.file}</Text>
          <Text style={styles.navText}>文件</Text>
        </TouchableOpacity>
        <TouchableOpacity style={[styles.navItem, styles.activeNavItem]}>
          <Text style={styles.navIcon}>{ICONS.share}</Text>
          <Text style={styles.navText}>共享</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.navItem}>
          <Text style={styles.navIcon}>{ICONS.download}</Text>
          <Text style={styles.navText}>下载</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8fafc',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: 20,
    backgroundColor: '#ffffff',
    borderBottomWidth: 1,
    borderBottomColor: '#e2e8f0',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#1e293b',
  },
  uploadButton: {
    backgroundColor: '#3b82f6',
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderRadius: 20,
  },
  uploadText: {
    color: '#ffffff',
    fontSize: 14,
    fontWeight: '500',
  },
  statsContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    padding: 16,
    backgroundColor: '#ffffff',
    marginBottom: 16,
  },
  statItem: {
    alignItems: 'center',
  },
  statNumber: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#3b82f6',
  },
  statLabel: {
    fontSize: 12,
    color: '#64748b',
    marginTop: 4,
  },
  tabsContainer: {
    flexDirection: 'row',
    backgroundColor: '#ffffff',
    marginHorizontal: 16,
    borderRadius: 8,
    marginBottom: 16,
    borderWidth: 1,
    borderColor: '#e2e8f0',
  },
  tabButton: {
    flex: 1,
    paddingVertical: 12,
    alignItems: 'center',
  },
  activeTabButton: {
    backgroundColor: '#3b82f6',
  },
  tabText: {
    fontSize: 14,
    color: '#64748b',
  },
  activeTabText: {
    color: '#ffffff',
  },
  filesList: {
    flex: 1,
    paddingHorizontal: 16,
  },
  foldersList: {
    flex: 1,
    paddingHorizontal: 16,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#1e293b',
    marginVertical: 12,
  },
  fileCard: {
    backgroundColor: '#ffffff',
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
    elevation: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
  },
  fileHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 12,
  },
  fileIcon: {
    width: 48,
    height: 48,
    borderRadius: 8,
    backgroundColor: '#dbeafe',
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 12,
  },
  fileIconText: {
    fontSize: 24,
  },
  fileInfo: {
    flex: 1,
  },
  fileName: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#1e293b',
  },
  fileMeta: {
    fontSize: 12,
    color: '#64748b',
    marginTop: 4,
  },
  fileActions: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  actionButton: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#f1f5f9',
    paddingHorizontal: 12,
    paddingVertical: 8,
    borderRadius: 8,
  },
  actionIcon: {
    fontSize: 16,
    marginRight: 6,
  },
  actionText: {
    fontSize: 12,
    color: '#64748b',
  },
  folderCard: {
    backgroundColor: '#ffffff',
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
    elevation: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    flexDirection: 'row',
    alignItems: 'center',
  },
  folderIcon: {
    width: 48,
    height: 48,
    borderRadius: 8,
    backgroundColor: '#fef3c7',
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 12,
  },
  folderIconText: {
    fontSize: 24,
  },
  folderInfo: {
    flex: 1,
  },
  folderName: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#1e293b',
  },
  folderMeta: {
    fontSize: 12,
    color: '#64748b',
    marginTop: 4,
  },
  bottomNav: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    backgroundColor: '#ffffff',
    borderTopWidth: 1,
    borderTopColor: '#e2e8f0',
    paddingVertical: 12,
  },
  navItem: {
    alignItems: 'center',
    flex: 1,
  },
  activeNavItem: {
    paddingBottom: 2,
    borderBottomWidth: 2,
    borderBottomColor: '#3b82f6',
  },
  navIcon: {
    fontSize: 20,
    color: '#94a3b8',
    marginBottom: 4,
  },
  activeNavIcon: {
    color: '#3b82f6',
  },
  navText: {
    fontSize: 12,
    color: '#94a3b8',
  },
  activeNavText: {
    color: '#3b82f6',
    fontWeight: '500',
  },
});

export default GroupFileSharingApp;

安装DevEco Studio程序

选择目标安装目录：

设置环境变量，但是需要重启一下：

新建一个空白模板：

设置API为24的模板项目：

初始化项目，自动下载相关依赖：

---

---

打包

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

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

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