React-native:下载并解压大型语言文件。

一个多语言的反应式原生应用。每个语言捆绑包大约50mb。将所有的语言都包含在一个捆绑包中是没有意义的。那么,我应该怎么做呢?

我想正确的方法是在选择语言时下载各自的语言文件。我想用AsyncStorage存储它还是什么?

解决方案:

简单解释一下,你会。

  1. 将JSON以ZIP格式存储在Google存储中(节省内存带宽时间)。

  2. 将文件解压为JSON(RN格式)。

  3. 在AsyncStorage中存储JSON(RN中)

  4. 从AsyncStorage中检索(RN)

[依赖关系汇总]你可以这样做,使用这些deps。

提示。总是以zip格式存储大语言的json(这可以节省90%的大小)。

我在这里做了一个快速测试:一个3.52MB的json文件,变成了一个26KB的压缩文件!

让我们考虑一下,你存储的zip文件,可以通过使用一个公共网址来访问,例如。https://storage.googleapis.com/bucket/folder/lang-file.zip.

安装并链接上面所有的RN deps,这是工作所需。

导入deps

import RNFetchBlob from 'rn-fetch-blob';
import { unzip } from 'react-native-zip-archive';
import AsyncStorage from '@react-native-community/async-storage';
  1. 下载文件的方法是 rn-fetch-blob. 这可以使用。
RNFetchBlob
.config({
  // add this option that makes response data to be stored as a file,
  // this is much more performant.
  fileCache : true,
})
.fetch('GET', 'http://www.example.com/file/example.zip', {
  //some headers ..
})
.then((res) => {
  // the temp file path
  console.log('The file saved to ', res.path())

  // Unzip will be called here!
  unzipDownloadFile(res.path(), (jsonFilePath) => {

    // Let's store this json.
    storeJSONtoAsyncStorage(jsonFilePath);

    // Done!
    // Now you can read the AsyncStorage everytime you need (using function bellow).
  });
});
  1. [function] 解压下载的文件,使用… react-native-zip-archive:
function unzipDownloadFile(target, cb) {
  const targetPath = target;
  const sourcePath = `${target}.json`;
  const charset = 'UTF-8';

  unzip(sourcePath, targetPath, charset)
  .then((path) => {
    console.log(`unzip completed at ${path}`)

    return cb(path);
  })
  .catch((error) => {
    console.error(error)
  });
}
  1. 功能]将JSON存储在AsyncStorage中。
function storeJSONtoAsyncStorage (path) {
  RNFetchBlob.fs.readFile(path, 'utf-8')
  .then((data) => {
    AsyncStorage.setItem('myJSON', data);
  });
}
  1. 从AsyncStorage中检索JSON数据(每次你想要的时候)。
AsyncStorage.getItem('myJSON', (err, json) => {
  if (err) {
    console.log(err);
  } else {
    const myJSON = JSON.parse(json);

    // ... do what you need with you json lang file here...
  }
})

这足以让动态的json lang文件在React Native中工作。

我正在用这种方法给我的i18n’ed项目提供一个类似的功能。

本文来自投稿,不代表运维实战侠立场,如若转载,请注明出处:https://www.shizhanxia.com/520.html

(0)
上一篇 2022年6月29日 下午3:57
下一篇 2022年6月29日 下午3:57

相关推荐

发表评论

登录后才能评论