如何在 React Native 中使用 i18next 进行本地化

Question

i18next 无法解析 json 的键，如果它在键中包含点（.），即 ngb.pagination.last-aria 。 也面临插值问题。 请查看以下代码。

请注意：我无法更改 json 文件键或其值，因为它正在网络中使用，现在我们将在我们的本机应用程序中使用它。

// en_en.json

// import { Localization } from 'expo';

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

// translation files

import en from './en/en_gb.json';
import de from './de/de_de.json';
import fr from './fr/fr_fr.json';

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

// Config
i18next.use(initReactI18next).init({
  resources,
  lng: 'en',
  fallbackLng: 'en',
  returnObjects: true,
});

// TODO
export function t(name: string, params = {}) {
  return i18next.t(`${name}`, params);
}

export default i18next;

// i18n.js

<Text>{i18next.t('has-expired', { alert: { uniqueId: 20 } })}</Text>

<Text>{i18next.t('ngb.pagination.last-aria'}</Text>

<Text>{i18next.t('hi'}</Text>

//组件

<ph name=\"INTERPOLATION\"><ex>{{alert.uniqueId}}</ex>20</ph> has expired.

ngb.pagination.last-aria

Hello

//输出

<ph name=\\"INTERPOLATION\\"><ex>{{alert.uniqueId}}</ex>20</ph> has expired. ngb.pagination.last-aria Hello

Answer 1

对于插值，我认为您正在逃避，因此请尝试更改 \\ 或使用

i18next.t('keyEscaped', { myVar: '<img />', interpolation: { escapeValue: false } });

与点相关，它们被视为分隔符，因此您可以像这样使用

- replace dot with `.`

Answer 2

如果你想使用 dots(.)，i18next 将自动分隔键并期望嵌套 JSON。 如果您想将点视为平面 JSON，您可以在keySeparator配置选项设置为false 。

如果您使用i18nexus.com来管理您的 i18next 翻译，您可以转到导出选项卡并将“密钥分离”设置为禁用。