在React Native（Expo）项目中使用“jszip”库时界面冻结

Question

import JSZip from "jszip";

const createArchive = async() => {
    // Some code
    const zip = new JSZip();
    const data = getExampleData();
    zip.file("example.json", data);
    const zipContent = await zip.generateAsync(
        { type: "base64" },
        (metadata) => {
          setCreationProgress(metadata.percent); // Set a progress value for ui
          console.log("Value:", metadata.percent);
        }
      );// When this function is executed the ui freezes
    // Some code
}

我在此代码中创建了一个 zip 存档。它确实有效，但是当执行函数“zip.generateAsync()”时，应用程序会冻结，直到函数完成。这可能需要很长时间，具体取决于文件的大小。界面不更新，什么都不能点击。因此，问题是用户无法看到存档创建的进度或取消它，因为界面没有响应。 （另外，请记住我正在使用 Expo）。

我相信一种解决方案可能是使用“expo-task-manager”和“expo-background-fetch”库将任务从主线程移动到后台，但我还无法使其工作。或者，我可以使用另一个库来创建存档，但我不知道是哪个库，因为似乎没有其他库可以与 Expo 配合使用。

Answer 1

您可以使用react-native-zip-stream库从ZIP存档中提取特定文件，而无需解压缩整个存档。该库允许您以各种格式（例如 base64、arraybuffer 或字符串）流式传输单个文件。

以下是如何从 ZIP 存档中提取特定文件的示例：

import { streamFileFromZip } from 'react-native-zip-stream';

const zipFilePath = '/path/to/your/zipfile.zip'; // Path to the ZIP file
const entryName = 'fileInsideZip.txt'; // Name of the file you want to extract

const extractFileFromZip = async () => {
  try {
    // Extract the file as a base64 string
    const base64Data = await streamFileFromZip(
      zipFilePath,
      entryName,
      'base64'
    );
    console.log('Extracted Base64 Data:', base64Data);

    // Or, extract the file as an ArrayBuffer
    const arrayBufferData = await streamFileFromZip(
      zipFilePath,
      entryName,
      'arraybuffer'
    );
    console.log('Extracted ArrayBuffer Data:', new Uint8Array(arrayBufferData));

    // Or, extract the file as a plain string
    const stringData = await streamFileFromZip(
      zipFilePath,
      entryName,
      'string'
    );
    console.log('Extracted String Data:', stringData);
  } catch (error) {
    console.error('Error extracting file from ZIP:', error);
  }
};

extractFileFromZip();

在此示例中，您可以根据您希望如何在应用程序中处理文件数据来选择格式（base64、arraybuffer 或字符串）。此方法仅提取指定的文件，这对于您不想提取所有内容的大型 ZIP 存档来说是理想的选择。

您可以在此处找到有关该库的更多详细信息：react-native-zip-stream GitHub。