I18Next DateTime格式不起作用在Expo项目中
我的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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
就像新的复数规则一样: https ://www.i18next.com/how-to/faq#why-are-my-plural-keys-not-working
您还可以为内置格式使用其他填充:https://www.i18next.com/translation-function/formatting
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