如何使用React Native Expo归档文件夹？

推荐方案：使用expo-compression #

react-native-zip-archive依赖原生模块，Expo管理项目无法直接使用。推荐使用Expo官方维护的expo-compression，它完全兼容Expo环境，支持ZIP格式的压缩和解压操作。

1. 安装依赖 #

npx expo install expo-compression

expo-file-system是Expo项目默认包含的依赖，若未安装可执行同样的安装命令补充。

2. 压缩文件夹为ZIP文件 #

先通过expo-file-system读取文件夹内的所有文件路径，再传入压缩方法：

import * as FileSystem from 'expo-file-system';
import * as Compression from 'expo-compression';

async function zipFolder(folderUri, outputZipUri) {
  // 获取目标文件夹内的所有文件URI
  const fileNames = await FileSystem.readDirectoryAsync(folderUri);
  const fileUris = fileNames.map(name => `${folderUri}/${name}`);

  // 执行压缩，可指定压缩级别（LOW/MEDIUM/HIGH）
  await Compression.compressAsync(
    fileUris,
    outputZipUri,
    { compressionLevel: Compression.CompressionLevel.MEDIUM }
  );

  console.log('压缩完成，ZIP文件路径：', outputZipUri);
}

// 调用示例
const targetFolder = `${FileSystem.documentDirectory}my_folder/`;
const outputZip = `${FileSystem.documentDirectory}my_archive.zip`;
zipFolder(targetFolder, outputZip);

3. 解压ZIP文件 #

使用decompressAsync方法，需确保输出文件夹存在：

async function unzipFile(zipUri, outputFolderUri) {
  // 检查输出文件夹是否存在，不存在则创建
  const folderInfo = await FileSystem.getInfoAsync(outputFolderUri);
  if (!folderInfo.exists) {
    await FileSystem.makeDirectoryAsync(outputFolderUri, { intermediates: true });
  }

  // 执行解压
  await Compression.decompressAsync(zipUri, outputFolderUri);

  console.log('解压完成，输出路径：', outputFolderUri);
}

// 调用示例
const unzipTarget = `${FileSystem.documentDirectory}unzipped_folder/`;
unzipFile(outputZip, unzipTarget);

关键注意事项 #

• 仅操作Expo允许访问的文件路径，比如FileSystem.documentDirectory（文档目录）、FileSystem.cacheDirectory（缓存目录），避免访问系统受限路径。
• 处理大文件夹时建议添加加载提示，避免界面无响应。
• 若使用Expo裸工作流，也可配置react-native-zip-archive，但需执行iOS pod安装和Android原生项目配置步骤。

内容的提问来源于stack exchange，提问作者JohnnySmith88