使用异步存储进行本地化答案

【问题标题】：Using Async Storage for Localization使用异步存储进行本地化
【发布时间】：2020-11-03 01:51:34
【问题描述】：

我有 2 个不同的 API 用于本地化。这些返回 json。

getEnLoc() //400kb
getEsLoc() //400kb

我想在应用程序准备好运行时在 App.ts 上调用它们，并将返回的答案（json 对象）写入异步存储。之后，在翻译任意页面的同时，会检查本地存储中的key-values。

// In App.ts
AsyncStorage.setItem('@storage_Key', getEnLoc())
// In Home.tsx
const jsonValue = await AsyncStorage.getItem('@storage_Key')

你怎么看这个逻辑？您认为它会导致性能损失吗？

【问题讨论】：

标签： typescript react-native localization local-storage asyncstorage

【解决方案1】：

我认为您应该只使用 AsyncStorage 中的语言键，例如“en”、“en_US”或“tr_TR”。您应该编写语言 JSON 文件。例如 en.json。我使用这个类结构进行本地化。

import { NativeModules, Platform } from 'react-native';
import { strings } from 'res';

class LanguageHelper {
  currentLanguage = null;
  currentStrings = null;

  init() {
    this.currentLanguage = this.determineDeviceLanguage();
    this.setCurrentString();
  }

  setCurrentString() {
    switch (this.currentLanguage) {
      case 'tr_TR':
        this.currentStrings = require("./tr.json");
        break;
      default:
        this.currentStrings = require("en.json");
    }
  }

  determineDeviceLanguage() {
    // Determine device language
    const language =
      Platform.OS === 'ios'
        ? NativeModules.SettingsManager.settings.AppleLocale ||
          NativeModules.SettingsManager.settings.AppleLanguages[0]
        : NativeModules.I18nManager.localeIdentifier;

    return language;
  }
}

const LanguageProvider = new LanguageHelper();

export default LanguageProvider;

这样的 en.json。

{
    "title": "Hello World";
}

在您的 App.js 文件中，您导入此类。

import LanguageProvider from './LanguageHelper';

const App () => {
    useEffect(() => {
    LanguageProvide.init(); // Init language
}, []);
    return(/* Your components */)
}

然后您可以在导入后在您想要的地方使用这个本地化字符串。例如，

LanguageProvider.currentStrings.title

【讨论】：

我已经有了这样的结构，但它适用于 .json 文件，这些文件发生在项目中。现在我必须从外部 API 获取 tr_TR.json 文件。例如，我必须致电api.example.com/get-tr-loc-file 才能在线获取本地化信息。如果我不使用异步存储，我需要为每个字符串调用 API。
我认为 AsyncStorage 对于存储大数据来说是个坏主意。我认为您可以在应用程序打开时从 API 获取本地化 JSON 对象。然后将其保存在应用程序中的一个类，如 LanguageProvider。然后，您可以为每个字符串使用该类。这样就不需要每个字符串都调用API，而是调用一次。