标签: i18next

我在本机反应中使用i18next在应用程序中使用多种语言：用户可以通过单击此按钮中的按钮来更改应用程序中的语言我在AsyncStorage中设置语言，在我想要的 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, …

我正在使用 React-i18next 来国际化我的 React 应用程序。当我尝试addResourceBundle对每个模块的配置文件进行操作时，它会抛出此错误：

TypeError: i18next__WEBPACK_IMPORTED_MODULE_0__.default.addResourceBundle 不是函数

因此，我i18next.init之前添加了命令addResourceBundle。然后它可以工作，但显示下面的警告并重置先前选择的区域设置。

i18next: init: i18next 已经初始化。你应该只调用一次 init ！

这是我的i18n.tsx文件

import i18n from 'i18next'
import Backend from 'i18next-http-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'

i18n
 .use(Backend)
 .use(LanguageDetector)
 .use (initReactI18next)
 .init({
   fallbackLng: 'en',
   debug: true,
   detection: {
    order: ['queryString', 'cookie'],
    cache: ['cookie']
  },
  interpolation: {
    escapeValue: false
  },
  react: {
    wait: true,
    useSuspense: false,
 }
})

export default i18n;

这是我的模块的配置文件

import i18next from …

我的问题是，当使用react-18next更改语言时，它会导航回第一个屏幕。

我这样称呼它：

i18n.changeLanguage('en')

我有像这样的初始化：

i18n.use(initReactI18next).init({
  resources: {
    en: {
      translation: en
    },
    nl: {
      translation: nl
    }
  }
})

如果我的导航有 ['主'、'设置'、'语言'] 等路线，并且我的语言更改按钮位于语言视图中（我在那里导航：主 -> 设置 -> 语言），它会将用户重定向到主屏幕语言改变后。

语言改变正确，一切正常，除了它似乎重置了一切。我没有任何特定的导航设置。

有人经历过这样的事情吗？

我有一个关于通过 i18n 更改 React 中对象数组中的语言的问题。

我无法反应 useTranslation 的“t”功能。这就是为什么我有一个问题。

这是我的对象数组，如下所示。

import { useTranslation } from 'react-i18next';

export const CARD_DATA = [
  {
    'title': useTranslation.t('Card Data Title'), -> ERROR
    'icon': faCircleUser,
    'details': "I've studied Typography & Graphic Communication \
                at possibly the best Institution to do so in the \
                world - The University of Reading.",
    'color': '#e75d5d'
  },
  {
    'title': 'Responsive Web Design',
    'icon': faHeadphonesAlt,
    'details': 'I design future proof mobile first reponsive websites \
                to the latest web standards. I …

我有几个语言文件夹，里面有语言环境文件

  locales         \n  \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 en\n  |   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 common.json\n  |   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 ...\n  |   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 article.json\n  \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 de\n      \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 common.json\n      \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 ...\n      \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 article.json\n

我有一个像这样的 locale.json 的嵌套结构

{\n  "title": "Something",\n  "menu": {\n    "first": "First",\n    "second": "Second",\n    "third": "Third"\n  }\n}\n\n

我无法配置扩展设置来读取此区域设置结构

从这篇文章中我读到您可以添加后处理函数i18next：

i18n.addPostProcessor("myProcessorsName", function(value, key, options) 
{
   return 'some post processed data based on translated value';
});

并在初始化时添加：

i18n.init({ postProcess: 'myProcessorsName' });

但我得到一个错误addPostProcessor不是一个函数。

那么如何添加和使用后处理功能呢i18next？

我希望您在另一个隔离日表现出色！

我正在尝试使用 i18n 更改 React 应用程序的语言，但遇到问题。

这是我正在使用的代码片段（此代码位于组件 TopBar.jsx 中）

  function onSelectFlag(countryCode) {
    switch (countryCode) {
      case "US": {
        i18n.changeLanguage("en");
        break;
      }
      case "BR": {
        i18n.changeLanguage("po");
        break;
      }
      default: {
        i18n.changeLanguage("es");
        break;
     }
    }
  }

问题是，这段代码仅更改组件语言，而不更改整个应用程序语言。我做了一些研究，但没有发现任何东西......

有人知道如何解决这个问题吗？

谢谢！

上下文：react-i18next我正在使用ReactJS 模块制作一个多语言页面。

问题：我无法访问排列的 JSON 内容。

翻译的内容存储在每种语言的单独 JSON 文件中，非数组内容工作正常并正确显示和翻译，但是，我似乎无法在 React 组件上使用数组内容，更不用说通过console.log().

以下是我的文件的示例translationEN.json：

{
  "name": "Test",
  "occupations":["occupation1",
  "Part-time occupation2",
  "Language enthusiast"]
}

我可以name使用 来引用非数组i18n.t("name")。但是，尝试访问我的 arrayed occupationsusingi18n.t("occupations")结果会出现在以下 console.log 中：

key 'occupations (en)' returned an object instead of string.

使用JSON.stringify()并不能解决问题，也不能console.log(i18n.t("occupations"), { returnObjects: true })按照i18next 文档中的建议解决问题

提前致谢！

我需要使用 useTranslation 钩子和angerlySetInnerHTML 在组件中渲染一些样式化的jsx 标签，这些标签存储在json 文件中，我发现dangerouslySetInnerHTML 工作正常，但不要为每个标签应用顺风样式，

json 文件：

{
   "about-text":"<div className='text-blue px-5'><p>Text ...</p</div>",
}

内部组件：

<div className="p-10">
<div
   dangerouslySetInnerHTML={{
      __html: t('about-text'),
    }}
   />
</div>

我有很多这样的功能：

export function dialogContent() {
    const { t, i18n } = this.props;

    switch (this.state.dialogHandlerVariable) {
        //Delete changeLog
        case 0:
            return (<div> {t("dialog.dashboard.changelog.deleteChangelog.body")}</div>);
    }
}

但是这里我有一个错误。-> t不是函数..

因为这是缺少的：

export default compose(
    translate('translations'),
    connect()
)(LanguageChooser);

我怎样才能将translate（'translations'）部分添加到函数中？

谢谢