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

Posted 2021-03-19

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

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

答案

简单解释一下，你会。

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

2. 将文件解压为JSON（RN格式）。

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

4. 从AsyncStorage中检索(RN)

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

• react-native
• react-native-async-storage
• rn-fetch-blob
• react-native-zip-archive

提示。总是以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).
  });
});

2. [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)
  });
}

3. 功能]将JSON存储在AsyncStorage中。

function storeJSONtoAsyncStorage (path) {
  RNFetchBlob.fs.readFile(path, 'utf-8')
  .then((data) => {
    AsyncStorage.setItem('myJSON', data);
  });
}

4. 从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:/github.comfnandoi18n-js。.

另一答案

我还建议你看看i18n库，它是一个标准的javascript国际化工具。

可以考虑看看这个 文档页 在那里你可以找到一个加载翻译捆绑的选项，或者设置一个后端提供者并连接到它。

另外，为了回答存储的问题，如果你不打算设置一个后端，那么AsyncStorage将是一个合适的地方来存储你的密钥-翻译文本对。AsyncStorage将是一个合适的地方来存储你的密钥和翻译文本对。