I18Next DateTime格式不起​​作用在Expo项目中

发布于 2025-01-20 21:45:49 字数 3178 浏览 3 评论 0原文

我的i18.js文件(在app.js中导入) [请参阅下面的编辑]

我的en.json文件

{
  home: {
    "time": "{{stime, datetime}} to {{etime, datetime}}",
  }
}

翻译代码在组件

const i18timeFormat = { hour: "numeric", minute: "numeric", hour12: true };
return (
    <Text>
      t("home.time",
        {{
          stime: starttime,
          etime: endtime,
          formatParams: { stime: i18timeFormat, etime: i18timeFormat },
        }}
      )
    </Text>
  );

预期输出

8:30 am to 10:30 am

实际输出

Wed Apr 13 2022 08:30:12 GMT+0530 (IST) to Wed Apr 13 2022 10:30:12 GMT+0530 (IST)

中,我也尝试了官方示例。我可以尝试修复它吗?

编辑:
我已将以下软件包添加到polyfill intl dateTime和相对时间。

"@formatjs/intl-datetimeformat": "^5.0.1",
"@formatjs/intl-getcanonicallocales": "^1.9.2",
"@formatjs/intl-locale": "^2.4.47",
"@formatjs/intl-numberformat": "^7.4.3",
"@formatjs/intl-pluralrules": "^4.3.3",
"@formatjs/intl-relativetimeformat": "^10.0.1",

i18.js文件

import "@formatjs/intl-getcanonicallocales/polyfill";
import "@formatjs/intl-locale/polyfill-force";
import "@formatjs/intl-numberformat/polyfill-force";
import "@formatjs/intl-pluralrules/polyfill-force";

import "@formatjs/intl-datetimeformat/polyfill-force";
import "@formatjs/intl-datetimeformat/locale-data/en";
import "@formatjs/intl-datetimeformat/add-all-tz"; // Add ALL tz data

import "@formatjs/intl-relativetimeformat/polyfill-force";
import "@formatjs/intl-relativetimeformat/locale-data/en";

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import * as Localization from "expo-localization";

import en from "./i18n/en.json";

const resources = {
  en: { translation: en }
};

i18n.use(initReactI18next).init({
  resources,
  lng: "en",
  fallbackLng: "en",
});

export default i18n;

编辑2:
调试后的警告设置为真。

Missing locale data for 
at node_modules/@formatjs/intl-localematcher/abstract/utils.js:8:14 in invariant
at node_modules/@formatjs/intl-localematcher/abstract/ResolveLocale.js:25:8 in ResolveLocale
at node_modules/@formatjs/ecma402-abstract/NumberFormat/InitializeNumberFormat.js:31:12 in InitializeNumberFormat
at node_modules/@formatjs/intl-numberformat/src/core.js:37:4 in exports.NumberFormat
at node_modules/@formatjs/intl-datetimeformat/src/abstract/FormatDateTimePattern.js:51:13 in FormatDateTimePattern
at node_modules/@formatjs/intl-datetimeformat/src/abstract/FormatDateTime.js:11:16 in FormatDateTime
at node_modules/i18next/dist/cjs/i18next.js:1800:24 in formats.reduce$argument_0
at node_modules/i18next/dist/cjs/i18next.js:1789:19 in format
at node_modules/i18next/dist/cjs/i18next.js:1581:30 in todos.forEach$argument_0
at node_modules/i18next/dist/cjs/i18next.js:1576:6 in interpolate
at node_modules/i18next/dist/cjs/i18next.js:843:14 in extendTranslation
at node_modules/i18next/dist/cjs/i18next.js:806:14 in translate
at src/components/gate/timeBlock/index.js:74:10 in TimeBlock

My i18.js file (imported in App.js)
[See EDIT below]

My en.json file

{
  home: {
    "time": "{{stime, datetime}} to {{etime, datetime}}",
  }
}

Translation code in the component

const i18timeFormat = { hour: "numeric", minute: "numeric", hour12: true };
return (
    <Text>
      t("home.time",
        {{
          stime: starttime,
          etime: endtime,
          formatParams: { stime: i18timeFormat, etime: i18timeFormat },
        }}
      )
    </Text>
  );

Expected output

8:30 am to 10:30 am

Actual output

Wed Apr 13 2022 08:30:12 GMT+0530 (IST) to Wed Apr 13 2022 10:30:12 GMT+0530 (IST)

I've also tried the official example. Even it doesn't format. Anything I can try to fix it?

EDIT:
I've added the following packages to polyfill intl datetime and relative time.

"@formatjs/intl-datetimeformat": "^5.0.1",
"@formatjs/intl-getcanonicallocales": "^1.9.2",
"@formatjs/intl-locale": "^2.4.47",
"@formatjs/intl-numberformat": "^7.4.3",
"@formatjs/intl-pluralrules": "^4.3.3",
"@formatjs/intl-relativetimeformat": "^10.0.1",

i18.js file

import "@formatjs/intl-getcanonicallocales/polyfill";
import "@formatjs/intl-locale/polyfill-force";
import "@formatjs/intl-numberformat/polyfill-force";
import "@formatjs/intl-pluralrules/polyfill-force";

import "@formatjs/intl-datetimeformat/polyfill-force";
import "@formatjs/intl-datetimeformat/locale-data/en";
import "@formatjs/intl-datetimeformat/add-all-tz"; // Add ALL tz data

import "@formatjs/intl-relativetimeformat/polyfill-force";
import "@formatjs/intl-relativetimeformat/locale-data/en";

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import * as Localization from "expo-localization";

import en from "./i18n/en.json";

const resources = {
  en: { translation: en }
};

i18n.use(initReactI18next).init({
  resources,
  lng: "en",
  fallbackLng: "en",
});

export default i18n;

EDIT 2:
The warning after debug is set to true.

Missing locale data for 
at node_modules/@formatjs/intl-localematcher/abstract/utils.js:8:14 in invariant
at node_modules/@formatjs/intl-localematcher/abstract/ResolveLocale.js:25:8 in ResolveLocale
at node_modules/@formatjs/ecma402-abstract/NumberFormat/InitializeNumberFormat.js:31:12 in InitializeNumberFormat
at node_modules/@formatjs/intl-numberformat/src/core.js:37:4 in exports.NumberFormat
at node_modules/@formatjs/intl-datetimeformat/src/abstract/FormatDateTimePattern.js:51:13 in FormatDateTimePattern
at node_modules/@formatjs/intl-datetimeformat/src/abstract/FormatDateTime.js:11:16 in FormatDateTime
at node_modules/i18next/dist/cjs/i18next.js:1800:24 in formats.reduce$argument_0
at node_modules/i18next/dist/cjs/i18next.js:1789:19 in format
at node_modules/i18next/dist/cjs/i18next.js:1581:30 in todos.forEach$argument_0
at node_modules/i18next/dist/cjs/i18next.js:1576:6 in interpolate
at node_modules/i18next/dist/cjs/i18next.js:843:14 in extendTranslation
at node_modules/i18next/dist/cjs/i18next.js:806:14 in translate
at src/components/gate/timeBlock/index.js:74:10 in TimeBlock

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

好倦 2025-01-27 21:45:49

Like with the new plural rules: https://www.i18next.com/how-to/faq#why-are-my-plural-keys-not-working

You may also use other polyfills for the in-built formats: https://www.i18next.com/translation-function/formatting

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文