Question

我们希望在react本机项目中包含zip文件，例如在project/src/assets/zip文件夹中，然后将其包含在构建中，然后将其提取到本地电话存储中。

我们要实现的是，假设我们有一个要在react native应用上显示的网页。通过在项目中包含网页的资产，然后告诉网页在本地搜索资产文件，我们可以减少加载时间。

我们已经成功显示了从Internet下载的本地资产的zip格式的网页。但是我们还没有找到如何在本地项目上使用zip文件来实现相同的功能。

我们尝试导入资产文件，然后像下面一样直接将其解压缩，没有运气

import zipFile from './assets/zip/file.zip'
import * as RNFS from 'react-native-fs'
import { unzip } from 'react-native-zip-archive'

...

componentDidMount() {
  const destination = RNFS.DocumentDirectoryPath + '/'
  unzip(zipFile, destination)
    .then((result) => {
      console.log(result)
    })
    .catch((error) => {
      console.log(error)
    })
}

我们尝试使用react-native-local-resource来获得具有几种组合的文件，也没有运气

import zipFile from './assets/zip/file.zip'
import * as RNFS from 'react-native-fs'
import { unzip } from 'react-native-zip-archive'
import loadLocalResource from 'react-native-local-resource'

...

componentDidMount() {
  const destination = RNFS.DocumentDirectoryPath + '/'
  loadLocalResource(assetsZip)
    .then((fileContent) => unzip(fileContent, destination))
    .then((result) => {
      console.log(result)
    })
    .catch((error) => {
      console.log(error)
    })
}

import zipFile from './assets/zip/file.zip'
import * as RNFS from 'react-native-fs'
import { unzip } from 'react-native-zip-archive'
import loadLocalResource from 'react-native-local-resource'

...

componentDidMount() {
  const destination = RNFS.DocumentDirectoryPath + '/'
  const fileName = 'file.zip'
  loadLocalResource(assetsZip)
    .then((fileContent) => RNFS.writeFile(destination + fileName, fileContent))
    .then(() => unzip(destination + fileName, destination))
    .then((result) => {
      console.log(result)
    })
    .catch((error) => {
      console.log(error)
    })
}

我们如何将项目文件夹中的zip文件提取到Phone Storage中？

Answer 1

编辑：

在上一个答案使用该应用程序的调试版本时，它似乎在生产上中断了，因为在生产resource.uri上返回file:// uri而不是调试版本中的http://。

要解决此问题，我们需要检查它是file uri还是http url。然后如果是file uri，请在react-native-fs上使用复制功能而不是下载功能。

import zipFile from './assets/zip/file.zip'
import * as RNFS from 'react-native-fs'
import { unzip } from 'react-native-zip-archive'
import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'

...

componentDidMount() {
  const destination = RNFS.DocumentDirectoryPath + '/'
  const filename = 'file.zip'

  const resource = resolveAssetSource(zipFile)
  const fileUri = resource.uri

  this.loadZipFile(fileUri, destination + filename)
    .then((result) => unzip(destination + filename, destination))
    .then((result) => {
      console.log(result)
    })
    .catch((error) => {
      console.log(error)
    })
  }
}

loadZipFile = (fileUri, destinationFile) = {
  if (fileUri.startWith('file://')) {
    return RNFS.copyFile(fileUri, destinationFile)
  } else {
    const downloadOptions = {
      fromUrl: fileUri,
      toFile: destinationFile
    }

    return RNFS.downloadFile(downloadOptions).promise
  }
}

这对生产版本和调试版本均适用，即使使用代码推送发送zip文件在我们的情况下也可以正常工作。

旧答案：

在查看react-native-local-resource源代码之后，我们提出了一些想法。

在我们的案例中，react-native-local-resource的问题在于，最终结果是text，但是zip文件不是text。因此，我们尝试截取中间的代码以获取所需的zip文件。

经过一些实验，我们遵循react-native-local-resource代码，直到获得文件uri，然后使用react-native-fs将文件下载到本地存储文件夹，然后解压缩这些文件。< / p>

这是我们案例中的工作代码示例

import zipFile from './assets/zip/file.zip'
import * as RNFS from 'react-native-fs'
import { unzip } from 'react-native-zip-archive'
import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'

...

componentDidMount() {
  const destination = RNFS.DocumentDirectoryPath + '/'
  const filename = 'file.zip'

  const resource = resolveAssetSource(zipFile)
  const fileUri = resource.uri

  const downloadOptions = {
    fromUrl: fileUri,
    toFile: destination + filename
  }

  RNFS.downloadFile(downloadOptions).promise
    .then((result) => unzip(destination + filename, destination))
    .then((result) => {
      console.log(result)
    })
    .catch((error) => {
      console.log(error)
    })
}

希望它可以帮助遇到相同问题的任何人

从react native项目文件夹中提取zip文件

1 个答案: