如何在 React Native 中导入 i18next？

Posted 2023-05-07

技术标签:

【中文标题】如何在 React Native 中导入 i18next？【英文标题】：How to import i18next in React Native? 【发布时间】：2021-09-01 04:09:25 【问题描述】：

我正在尝试在 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 ,
  );

如何解决这个问题？

【问题讨论】：

【参考方案1】：