Извлеките zip-файл из собственной папки проекта при первом запуске - PullRequest
Новая
       75

Извлеките zip-файл из собственной папки проекта при первом запуске

0 голосов
/ 22 мая 2019

Мы хотим включить zip-файл в собственный реагирующий проект, например, в папку project/src/assets/zip, включить его в сборку и распаковать в локальное хранилище телефона при первом запуске приложения.

То, чего мы хотим добиться, - это предположить, что у нас есть веб-страница, которую мы хотим показать в своем собственном приложении. Мы можем уменьшить время загрузки, включив ресурс для веб-страницы в проект, а затем попросить веб-страницу выполнить поиск файла ресурсов локально.

Мы успешно показываем веб-страницу с локальными ресурсами, загруженными из Интернета, в формате 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)
    })
}

Мы пытаемся использовать act-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?

1 Ответ

0 голосов
/ 22 мая 2019

РЕДАКТИРОВАТЬ:

, пока предыдущий ответ работал над отладочной версией приложения, кажется, что он работает на производстве, потому что на производстве resource.uri возвращает file:// uri вместоhttp:// как в отладочной версии.

, чтобы исправить проблему, нам нужно проверить, был ли это file uri или http url.затем используйте функцию копирования в act-native-fs вместо функции загрузки, если она была file uri. 

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-файл с использованием push-кода в нашем случае работал нормально.

СТАРЫЙ ОТВЕТ:

После просмотра исходного кода реагировать-нативный-локальный-ресурс , мы придумали некоторую идею.

Проблема с response-native-local-resource в нашем случае заключается в том, что конечный результат был text, но zip-файл не является text.Поэтому мы пытаемся перехватить код посередине, чтобы получить zip-файл, как нам нужно.

После некоторого эксперимента мы следуем реагировать-нативный-локальный-ресурс код, пока не получим uri файла, затем используйте реагировать-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

  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)
    })
}

Надеюсь, что это может помочь любому, кто столкнулся с той же проблемой

...