如何使用 i18next 获取存储在 AsyncStorage 中的语言环境？

Question

我有一个适用于 react-native 应用程序的 i18next 设置。我唯一想念的是检索用户在 AsyncStorage 中保存的语言环境。

感谢18n.use(()=> "locale")，i18next 让您有机会在应用程序启动之前设置语言环境。只要函数不是异步的，它就可以正常工作。

问题是 AsyncStorage 是异步的，需要 await 关键字。如果我这样做，应用程序就会崩溃。到目前为止，我唯一的选择是不允许用户更改他的语言环境并始终使用他的设备。

有办法解决吗？这是我的代码（detectLocale() 中有问题的 async/await）。

const detectLocale =  async () => {
  const storedLocale = await AsyncStorage.getItem("my-locale");
  if (storedLocale) {
    return JSON.parse(storedLocale);
  }
  const mobileLocale =
    Platform.OS === "ios"
      ? NativeModules.SettingsManager.settings.AppleLocale ||
        NativeModules.SettingsManager.settings.AppleLanguages[0]
      : NativeModules.I18nManager.localeIdentifier;
  if (mobileLocale) {
    return mobileLocale.split("_")[0];
  }
  return languages.EN;
};

const languageDetector = {
  type: "languageDetector" as LanguageDetectorAsyncModule["type"],
  async: false,
  detect: detectLocale,
  init: () => {},
  cacheUserLanguage: () => {},
};

export default i18n
  .use(languageDetector)
  .use(initReactI18next)
  .init({
    resources,
    fallbackLng: languages.EN,
    keySeparator: ".",
    whitelist: [languages.EN, languages.FR],
    interpolation: { escapeValue: false },
  });

谢谢！

Answer 1

const detectLocale =  async (callback) => {
  const storedLocale = await AsyncStorage.getItem("my-locale");
  if (storedLocale) {
    return callback(JSON.parse(storedLocale));
  }
  const mobileLocale =
    Platform.OS === "ios"
      ? NativeModules.SettingsManager.settings.AppleLocale ||
        NativeModules.SettingsManager.settings.AppleLanguages[0]
      : NativeModules.I18nManager.localeIdentifier;
  if (mobileLocale) {
    return callback(mobileLocale.split("_")[0]);
  }
  return callback(languages.EN);
};

const languageDetector = {
  type: "languageDetector" as LanguageDetectorAsyncModule["type"],
  async: true,
  detect: detectLocale,
  init: () => {},
  cacheUserLanguage: () => {},
};

export default i18n
  .use(languageDetector)
  .use(initReactI18next)
  .init({
    resources,
    fallbackLng: languages.EN,
    keySeparator: ".",
    whitelist: [languages.EN, languages.FR],
    interpolation: { escapeValue: false },
  });