标签: i18next

带有 i18next 的 gettext 样式键和一般工作流程

我们想与翻译人员交换 PO 文件，并将这些文件转换为 i18next 的原生 JSON 格式。使用i18next-conv 实用程序听起来很简单。

但是，i18next 需要或多或少的特殊键；例如，点对于 i18next 命名空间具有特殊含义。相比之下，gettext PO 文件旨在为其消息 ID携带源字符串（原始语言）。

我们知道消息 ID 可以是任意的，因此可以直接映射到 i18next 键，但是出于各种原因，我们希望使用源字符串并使用 PO 文件。

主要原因是我们想使用的所有翻译工具，可能还有我们所有翻译人员的工具，都期待这一点。使用符号键会使翻译变得非常痛苦。无论如何，我们从围绕这个问题的辩论中得出的结论是，这主要是一个意见问题；我们有点做我们的，我们想把这个限制作为这个问题的要求。

从技术角度来看，将源字符串用作 i18next 键真的是个坏主意吗？逃离他们有多难？除了点和命名空间之外，还有什么我们应该关心的吗？
如果我们确定要继续使用符号键，是否有替代 i18next-conv 的方法可以使用源字符串作为消息 ID 从 PO 文件生成 i18next JSON 翻译文件？我们知道我们很可能需要维护符号名称和原始语言字符串之间的单独映射，我们已经准备好这样做。

此外，我们想知道一般的工作流程。原始的 PO 文件是如何生成的？翻译文件是如何维护的？

如果我们在 i18next 中使用源字符串作为键，从代码库中提取字符串的最佳工具是什么？xgettext 似乎不支持 Javascript。
如果我们在 i18next 中使用符号键，我们怎样才能最好地生成原始 PO 文件？手动编写 POT 文件是一个好习惯吗？
同样，如果我们使用符号键，那么每当我们更新原始语言字符串时，我们如何轻松地使翻译无效？有工具吗？

我们知道这些问题是非常基本的，但我们发现有关 i18next-gettext 集成的信息如此之少，这让我们感到有些惊讶。i18next-conv 工具存在并且像宣传的那样完美运行，但它真的有用吗？人们真的使用它吗？如果是这样，我们的问题是否相关？

最后，我们对系统成熟度的期望是不是有点太高了？

javascript localization gettext internationalization i18next

tne*_*tne

lucky-day

4
推荐指数

2
解决办法

1507
查看次数

jquery-i18next - 用法,按用户更改语言,从文件加载翻译

我正在寻找一个国际化框架,并遇到了jqueryi-18next.js.我实际上完全对使用此插件感到困惑,因为示例文件中的代码与文档不同.

我修改了sample.html,我添加了两个语言资源(de,fr),当我更改脚本中的"lng"值时,它工作正常.

i18next.init({
        lng: 'de',
        resources: {
          en: {
            translation: {
              nav: {
                page1: 'Page One',
                page2: 'Page Two',
                page3: 'Page Three'
              }
            }
          },
          de: {
            translation: {
              nav: {
                page1: 'Seite Eins',
                page2: 'Seite Zwei',
                page3: 'Seite Drei'
              }
            }
          },
          fr: {
            translation: {
              nav: {
                page1: 'Page Un',
                page2: 'Page Deux',
                page3: 'Page Trois'
              }
            }
          }
        }
      }, function(err, t) {
        i18nextJquery.init(i18next, $);
        $('.nav').localize();
      });

Run Code Online (Sandbox Code Playgroud)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-i18next/0.0.14/i18next-jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/2.0.22/i18next.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
<ul class="nav"> …

Run Code Online (Sandbox Code Playgroud)

jquery i18next

tsc*_*sch

lucky-day

4
推荐指数

1
解决办法

4986
查看次数

在JSON字符串中反应i18n换行

我正在与i18next进行反应https://github.com/i18next/react-i18next。我正在努力在JSON语言文件的字符串中换行。

这是我已经尝试过的方法，不会中断新行：

line: "This is a line. \n This is another line. \n Yet another line"，
line: ("This is a line."+ + "This is another line. \n Yet another line")，
line: ('This is a line. This is another line. \n Yet another line')，

我显然尝试在每个句子后换行。这就是我所说的：

<TooltipLink onClick={() => {
    this.toggleHelpTextDialog(t('test:test.line'));
}}/>

Run Code Online (Sandbox Code Playgroud)

有任何想法吗？谢谢！

html json i18next reactjs

Noc*_*ebo

lucky-day

4
推荐指数

2
解决办法

3306
查看次数

如何通过 i18next 从 hoc 翻译的组件中检索 ref

我使用 i18next 在单独的 repo 中翻译我的组件。现在我需要使用主项目中一个组件的方法。这是示例组件：

class ExampleComponent extends React.Component {
  constructor(props) {
    this.state = {
      text: '',
    };
    this.resetText = this.resetText.bind(this);
  }

  resetText() {
    this.setState({
    text: '',
    });
  }

  render() {
    <div/>
  }

export default translate('components', { withRef: true })(ExampleComponent);

Run Code Online (Sandbox Code Playgroud)

现在我需要在我的主项目中使用 resetText，没有翻译它工作正常

class MainComponent extends Component {

  resetComponent() {
    return () => this.exampleComponent.resetText();
  }

  renderExampleComponent() {
    return (
      <ExampleComponent
        ref={(exampleComponent) => { this.exampleComponent = exampleComponent; }}
      />
    );
  }

  render() {
    return (
      <div>
        {this.resetComponent()}
      </div>
    );
  }

Run Code Online (Sandbox Code Playgroud)

我试过 this.refs.exampleComponent.resetText(); …

javascript i18next reactjs react-i18next

luk*_*z-p

lucky-day

4
推荐指数

1
解决办法

441
查看次数

reactjs - 谷歌只显示空白页面

我刚刚使用reactjs编写了我的第一个网站,但当我查看谷歌如何看到我的网站时,我收到以下结果:

我的HTML文件如下所示:

<!DOCTYPE html>
<html>
<head>
    <title>MySite</title>
</head>
<body>
    <div id="root"></div>
    <script async type="text/javascript" src="index.browser.js"></script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

我已经停用了所有用于测试的AJAX调用,并且在加载了js文件后立即执行了ReactDOM.render.JS文件本身是经过编译,压缩的,大小不到300 KB(包括所有库,如反应本身).

在这一点上,我不明白我可以做哪些更改谷歌正确渲染我的页面？据我所知,反复化的谷歌渲染问题通常来自AJAX调用或在网站本身被渲染和DOM更改之前在应用程序代码中完成的其他长期工作.但是在删除大型库(除了i18next并做出反应),最小化和压缩代码之后,我看不出我能做些什么来显着提高性能或渲染时间.PageSpeed Insights是99/100点(桌面,只抱怨我可以最小化html以节省110个字节).

我的错误可能是什么想法？服务器端渲染对我来说不是一个合适的选择.

您可以在此处查看演示页面:http://comparo.com.mx

正如您所看到的,没有太多 - 但显示的HTML内容在加载index.browser.js之后立即呈现,这是一个<300KB的文件,因此不应该使谷歌搜索控制台无法正确呈现页面.

编辑:我的服务器位于欧洲,并且远离谷歌服务器从美国爬行.这可能是一个问题吗？

javascript google-search google-webmaster-tools i18next reactjs

Mar*_*ies

2018 02-21

4
推荐指数

1
解决办法

2537
查看次数

如何使用 MDXJS 在 MDX/Markdown 文件中使用 i18next/react-i18next？

我们使用MDXJS包在Markdown中编写内容并在其中使用React组件。

有没有办法在 MDX/Markdown 文件中使用i18next / react-i18next包？

i18next reactjs next.js react-i18next mdxjs

jak*_*ill

2019 11-11

4
推荐指数

1
解决办法

2938
查看次数

使用 Jest 测试 i18next 时如何修复“TypeError：无法读取未定义的属性“类型”

我有一个 react 项目，并且包含了 i18next = 15.0.4 和 react-i18next = 10.2.0 依赖项。我已经创建了一个用于使用 react-i18next 初始化 i18next 的模块，并且我正在尝试使用 Jest 对这段代码进行单元测试。

我尝试导入初始化 i18next 的 i18n 模块并使用 jest 对其进行单元测试。

这是我的 i18n.ts 模块

import i18next from "i18next";
import { initReactI18next } from "react-i18next";

const config = {
    resources: {
        en: {
            static: {},
        },
    },
    fallbackLng: "en",
    defaultNS: "static",
    ns: "static",
    interpolation: {
        prefix: "[",
        suffix: "]",
    },
};

i18next.use(initReactI18next).init(config);

export default i18next;

Run Code Online (Sandbox Code Playgroud)

我试图从我的测试代码中调用它（i18n.test.ts）：

import i18n from "./i18n";

describe("i18n", () => {

    it("should work fine", () …

Run Code Online (Sandbox Code Playgroud)

typescript i18next jestjs react-i18next

Jes*_*sus

2019 04-05

4
推荐指数

2
解决办法

8070
查看次数

如何在 i18next 翻译字符串中保留替换标签之间的空格字符

我正在使用 v10react-i18next和最新Trans组件来获得翻译字符串，其中部分句子以粗体显示。

在 HTML 中，我可以插入 a以确保该块和句子的其余部分 之间有一个空格，但它会在翻译字符串中被删除。

JSX 文件：

<Trans i18nKey="free_trial_enabled">
  <strong>30 Day Free Trial enabled</strong>&nbsp;for all users
</Trans>

Run Code Online (Sandbox Code Playgroud)

JSON 翻译键/值文件：

"free_trial_enabled": "<0>30 Day Free Trial enabled</0> for all users",

Run Code Online (Sandbox Code Playgroud)

输出 HTML： 30 Day Free Trial enabled for all users

看起来像：“为所有用户启用 30 天免费试用”

如何保留 翻译字符串中的以便块后面的空格strong存在？

i18next reactjs react-i18next

Rac*_*rch

lucky-day

4
推荐指数

1
解决办法

5561
查看次数

(0, _reactI18next.translate) 不是函数

实际上，我是本机反应的新手，在这里我尝试使用“react-i18next”将语言更改为阿拉伯语，但是在执行时出现以下错误

ReactNativeJS ?? (0, _reactI18next.translate) 不是函数。(在 '(0, _reactI18next.translate)('common', { bindI18n: 'languageChanged', bindStore: false })', '(0, _reactI18next.translate)' 未定义)

这是我的代码

import React from 'react';
import AppNavigator from './src/controller/AppNavigator';
import { translate } from 'react-i18next';
// import i18n from './src/I18n/index';
console.reportErrorsAsExceptions = false;

const WrappedStack = ({ t }) => {
  return <AppNavigator screenProps={{ t }} />;
};
const ReloadAppOnLanguageChange = translate('common', {
  bindI18n: 'languageChanged',
  bindStore: false,
})(WrappedStack);

export default class App extends React.Component {
  render() {
    return (
      <ReloadAppOnLanguageChange/>
    );
  }
} …

Run Code Online (Sandbox Code Playgroud)

i18next react-native react-native-android

Pra*_*hok

lucky-day

4
推荐指数

1
解决办法

1827
查看次数

更改整个本机应用程序的语言

我的 react-native 应用程序有 2 种语言：英语和法语。我已经为英语和法语做了一个 i18n.js 文件和 2 个“translation.js”文件。它工作得很好（我试过在手机上设置法语，在模拟器上设置英语）。

现在，我想在应用程序的设置中创建一个按钮来为用户更改整个应用程序的语言，但我不知道什么函数调用以及如何创建它。

你能帮助我吗？非常感谢您的时间和帮助。

我的 i18n.js 文件；

import i18n from "i18next";
import detector from "i18next-browser-languagedetector";
import { reactI18nextModule } from "react-i18next";
import { NativeModules, Platform } from "react-native";

import en from "../public/locales/en/translation.js";
import fr from "../public/locales/fr/translation.js";

// the translations
const resources = {
  en: {
    translation: en
  },
  fr: {
    translation: fr
  }
};
const locale =
  Platform.OS === "ios"
    ? NativeModules.SettingsManager.settings.AppleLocale
    : NativeModules.I18nManager.localeIdentifier;

i18n.locale = locale;

i18n
  .use(detector)
  .use(reactI18nextModule) // passes …

Run Code Online (Sandbox Code Playgroud)

function translate i18next react-native

Kim*_*ako

lucky-day

4
推荐指数

1
解决办法

1万
查看次数