如何在 React Native 中导入 i18next？

Question

我正在尝试在 React Native 应用程序中使用 react-i18next。在我的 index.js 或 app.tsx 文件的顶部导入 i18next 时，构建崩溃并出现以下错误：

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

代码如下：

index.js：

import { AppRegistry } from "react-native";
import App from "./App";
import { name as appName } from "./app.json";
import "i18n/index";

AppRegistry.registerComponent(appName, () => App);

i18/index.ts:

import i18n, { LanguageDetectorAsyncModule } from "i18next";
import { initReactI18next } from "react-i18next";
import { Platform, NativeModules } from "react-native";
import { AsyncStorage } from "react-native";
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 = () => {
  const storedLocale = AsyncStorage.getItem("locale");
  if (storedLocale) {
    return storedLocale;
  }
  const mobileLocale =
    Platform.OS === "ios"
      ? NativeModules.SettingsManager.settings.AppleLocale ||
        NativeModules.SettingsManager.settings.AppleLanguages[0]
      : NativeModules.I18nManager.localeIdentifier;
  if (mobileLocale) {
    return mobileLocale;
  }
  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 },
  });

如何解决这个问题？

Answer 1

尝试重新运行 Metro bundler 并确保没有另一个 Metro bundler 正在为另一个 React Native 应用程序运行。