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

Question

我在本机反应中使用i18next在应用程序中使用多种语言：用户可以通过单击此按钮中的按钮来更改应用程序中的语言我在AsyncStorage中设置语言，在我想要的 i18next 初始化文件中使用AsyncStorage的值，但它不会改变它，因为AsyncStorage它需要async和await，所以需要很长时间才能改变值，这是代码：

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

查看此中等帖子以获取工作示例...

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