使用 i18next 從應用程序更改時，如何使反應本機應用程序保存語言？

Question

我在本機反應中使用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: () => {},
};