使用 i18next 从应用程序更改时，如何使反应本机应用程序保存语言？

Question

我在 react native 中使用 i18next 以在应用程序中使用多种语言： 用户可以通过单击按钮从应用程序更改语言 在这个按钮中，我做了一个动作来设置 AsyncStorage 中的语言， 在 i18next 初始化文件中，我想使用 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

使用languageDetector

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: () => {},
};