时间戳

首页 > 解决方案 > AsyncStorage：不变违规：模块 AppRegistry 不是注册的可调用模块

react-native - AsyncStorage：不变违规：模块 AppRegistry 不是注册的可调用模块

问题描述

我正在使用 react-i18next 翻译一个 React Native 应用程序。AsyncStorage它可以工作，但是在启动应用程序时我无法检索用户的语言环境。错误是：

ERROR TypeError: undefined is not a function, js engine: hermes ERROR Invariant Violation: Module AppRegistry 不是注册的可调用模块（调用runApplication）。错误的常见原因是应用程序入口文件路径不正确。当 JS 包损坏或加载 React Native 时出现早期初始化错误时，也会发生这种情况。，js 引擎：hermes

代码是：

import i18n, { LanguageDetectorAsyncModule } from "i18next";
import { initReactI18next } from "react-i18next";
import { Platform, NativeModules } from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";
import en from "./en.json";
import fr from "./fr.json";

const languages = {
  EN: "en",
  FR: "fr",
};

const resources = {
  en: { translation: en },
  fr: { translation: fr },
};

const detectLocale = async () => {
  const storedLocale = await AsyncStorage.getItem("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,
  init: () => {},
  detect: detectLocale,
  cacheUserLanguage: () => {},
};

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

所以错误来自于detectLocale调用的函数LanguageDetector.detect()。它是异步的，我使用await关键字。没有 ，一切正常AsyncStorage，因此错误必须来自这里。

我使用 React Native CLI，没有 expo，版本是迄今为止最新的版本：0.64.1。

标签： react-nativei18nextasyncstorage

解决方案

我遇到了类似的问题。为了使用 async 自定义语言检测器，您需要将 async 设置为 true。然后您将在detect() 上收到回调函数。



const languageDetector: LanguageDetectorAsyncModule = {
  type: "languageDetector",
  async: true,
  // Since we set async to true, detect has now callback function...
  detect: async (callback: (lang: string) => void) => {
  const language = await AsyncStorage.getItem('language')
    callback(lastSelectedLang);
  },
  init: () => {},
  cacheUserLanguage: (lng: string) =>
    AsyncStorage.setItem('language', lng),
};

推荐阅读