react-native - 如何使 React Native 应用程序在使用 i18next 从应用程序更改时保存语言？

Question

我在 native react 中使用 i18next 在应用程序中使用多种语言:用户可以通过单击按钮从应用程序更改语言在此按钮中，我执行一个操作来设置 AsyncStorage 中的语言，在 i18next init 文件中，我想使用 AsyncStorage 的值，但它不会更改它，因为 AsyncStorage 它需要异步和等待，因此需要很长时间才能更改该值，这是代码:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import English from '../Translation/Languages/English.json';
import Spanish from '../Translation/Languages/Spanish.json';
import Arabic from '../Translation/Languages/Arabic.json';
import AsyncStorage from '@react-native-async-storage/async-storage';

let language = null;

const changeLanguage = async () => {
try {
    const Lang = await AsyncStorage.getItem('Language');
    if (Lang !== null) {
        language = Lang;
    }
}
catch (error) {
    console.log("Error ", error)
}
};

changeLanguage();

i18n
.use(initReactI18next)
.init({
    lng: language,
    fallbackLng: 'en',
    resources: {
        en: English,
        es: Spanish,
        ar: Arabic
    }
});

export default i18n;

Answer 1

看看这个 medium-post对于工作样本...

Github 存储库 https://github.com/hend-elsahli/ReactNativeLocalization

使用语言检测器

i18n
  .use(languageDetector)
  .init(...)

const languageDetector = {
  init: Function.prototype,
  type: 'languageDetector',
  async: true, // flags below detection to be async
  detect: async callback => {
    const selectedLanguage = await AsyncStorage.getItem('Language');
    /** ... */
    callback(selectedLanguage);
  },
  cacheUserLanguage: () => {},
};