Использование Asyn c Storage для локализации - PullRequest
Новая
       31

Использование Asyn c Storage для локализации

0 голосов
/ 13 июля 2020

У меня есть 2 разных API, которые я использую для локализации. Они возвращают json. 

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

Я хочу вызвать их в App.ts, пока приложение готово к запуску, и записать возвращенный ответ (json объект) в хранилище asyn c. После этого, пока переводится любая страница, будут проверяться пары "ключ-значение" в локальном хранилище. 

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

Что вы думаете об этом logi c? Как вы думаете, это приводит к снижению производительности?

1 Ответ

0 голосов
/ 13 июля 2020

Я думаю, вы должны использовать только языковой ключ в 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
...