\u5728\u8fc7\u53bb\u7684 React \u548c React Native \u9879\u76ee\u91cc\uff0c\u5bf9\u4e8e\u591a\u8bed\u8a00\u5904\u7406\uff0c\u4f7f\u7528\u7684\u662f react-i18next \u6765\u5904\u7406\u7684\u3002\u4eca\u5929\u7ed9\u5927\u5bb6\u5206\u4eab\u4e0b\u8fd9\u4e2a\u5e93\u7684\u4e00\u4e9b\u8fdb\u9636\u7528\u6cd5\u548c\u6ce8\u610f\u4e8b\u9879\u3002<\/p>\n\n\n\n
\u5176\u5b9e\u4e00\u5f00\u59cb\u7684\u65f6\u5019\uff0c\u6211\u81ea\u5df1\u662f\u6709\u70b9\u56f0\u60d1\u7684\uff0creact-i18next \u548c i18next \u662f\u4ec0\u4e48\u5173\u7cfb\uff1f\u4e3a\u4ec0\u4e48\u9879\u76ee\u8981\u5b89\u88c5\u8fd92\u4e2a\u5e93\uff0c\u800c\u4e0d\u662f\u4e00\u4e2a\uff1f\u800c\u4e14\u4e3a\u4ec0\u4e48\u5728\u4ee3\u7801\u91cc\u5982\u4f55\u4ece i18next \u91cc\u5bfc\u5165\u67d0\u4e9b\u53d8\u91cf\u4f1a\u51fa\u73b0\u975e\u9884\u671f\u7684\u7ed3\u679c\u3002\u6240\u4ee5\u8fd9\u91cc\u4e5f\u7ed9\u5c0f\u4f19\u4f34\u89e3\u91ca\u4e0b\uff0creact-18next \u662f\u5bf9 i18next \u7684 react \u7248\u672c\u5c01\u88c5\u3002\u6362\u53e5\u8bdd\u6765\u8bf4\uff0c\u4e00\u822c\u60c5\u51b5\u4e0b\uff0c\u5927\u5bb6\u76f4\u63a5\u4f7f\u7528 react-i18next \u5e93\u5c31\u53ef\u4ee5\u4e86\u3002<\/p>\n\n\n\n
\u5b89\u88c5\u5f88\u7b80\u5355\uff1a<\/p>\n\n\n\n
npm install react-i18next i18next --save<\/code><\/pre>\n\n\n\n\u8fdb\u9636\u4e00\u3001\u517c\u5bb9\u6027\u95ee\u9898<\/p>\n\n\n\n
\u5982\u679c\u4f60\u7684\u4ee3\u7801\u5728\u8fd0\u884c\u65f6\u51fa\u73b0\u4e86\u4e0b\u9762\u7684\u9519\u8bef\uff1a
i18next::pluralResolver:
Your environment seems not to be Intl API compatible,
use an Intl.PluralRules polyfill.
Will fallback to the compatibilityJSON v3 format handling.
\u90a3\u4e48\u6309\u7167\u5b98\u65b9\u7684\u8bf4\u660e\uff08https:\/\/www.i18next.com\/how-to\/faq#why-are-my-plural-keys-not-working\uff09\uff0c\u8868\u793a\u5f53\u524d\u73af\u5883\u4e0d\u517c\u5bb9 Intl API\u3002<\/p>\n\n\n\n
\u89e3\u51b3\u65b9\u6cd5\uff1a<\/p>\n\n\n\n
npm install intl-pluralrules --save<\/code><\/pre>\n\n\n\n\u7136\u540e\u5728\u591a\u8bed\u8a00\u7684\u521d\u59cb\u5316\u6587\u4ef6\u91cc\u5bfc\u5165\uff1a<\/p>\n\n\n\n
import 'intl-pluralrules'<\/code><\/pre>\n\n\n\n\u8fd9\u53d6\u51b3\u4e8e\u4f60\u7684 \u9879\u76ee\u7ed3\u6784\uff0c\u53ef\u80fd\u5c31\u5728 index.js \u91cc\uff0c\u6211\u4eec\u7684\u9879\u76ee\u5c31\u662f\u5728 i18n.ts \u6587\u4ef6\u91cc\u3002<\/p>\n\n\n\n
\u8fd9\u4e2a\u95ee\u9898\uff0c\u5728\u6211\u4eec\u7684 React Native \u9879\u76ee\u91cc\u6709\u78b0\u5230\u8fc7\u3002<\/p>\n\n\n\n
\u8fdb\u9636\u4e8c\uff0c\u4f20\u5b57\u6bb5<\/p>\n\n\n\n
\u4f8b\u5982\u6709\u4e0b\u9762\u7684 json \u6587\u4ef6\uff1a<\/p>\n\n\n\n
{\n \"error\": {\n \"required\": \"{{field}}\u5fc5\u586b\",\n \"invalid\": \"\u65e0\u6548\u7684{{field}}\"\n }\n}<\/code><\/pre>\n\n\n\n\u90a3\u4e48\u4f7f\u7528\u65f6\uff0c\u5c31\u662f\u8fd9\u6837\u4f7f\u7528\u7684\uff1at(‘error.required’, { field: t(‘Email’) })<\/p>\n\n\n\n
\u8fdb\u9636\u4e09\uff0c\u81ea\u5b9a\u4e49\u591a\u8bed\u8a00\u5c42\u7ea7\u5206\u9694\u7b26<\/p>\n\n\n\n
\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u4ee3\u7801\u91cc\u4f7f\u7528 . \u6765\u8868\u793a\u5c42\u7ea7\uff0c\u4f8b\u5982 error.required\uff0c\u5f53\u7136\u4e5f\u53ef\u4ee5\u4f7f\u7528\u4e0b\u9762\u7684\u914d\u7f6e\u6765\u66f4\u6539\u4e3a\u4f7f\u7528 \u201c\/\u201d\uff1a<\/p>\n\n\n\n
i18n.use(initReactI18next).init({\n \/\/ ...\n keySeparator: '\/'\n})<\/code><\/pre>\n\n\n\n\u90a3\u4e48\u524d\u9762\u7684\u8c03\u7528\u5c31\u6210\u4e86 t(‘error\/required’, { field: t(‘Email’) })\uff0c\u6211\u662f\u89c9\u5f97\u8fd9\u4e2a\u4e00\u822c\u60c5\u51b5\u4e0b\u662f\u4e0d\u5fc5\u65e0\u82e6\u786c\u5403\u7684\uff0c\u53ef\u80fd\u5728\u7279\u6b8a\u573a\u5408\u9700\u8981\u4f7f\u7528\u3002\u5927\u5bb6\u770b\u770b\u5c31\u53ef\u4ee5\u3002<\/p>\n\n\n\n
\u8fdb\u9636\u56db\uff0c\u81ea\u52a8\u5355\u590d\u6570<\/p>\n\n\n\n
i18next \u5bf9\u4e8e\u81ea\u52a8\u5355\u590d\u6570\u6709\u9884\u5b9a\u7684\u7ea6\u5b9a\uff0c\u53ea\u9700\u8981\u5728 key \u540e\u9762\u6dfb\u52a0 “_other” \u5373\u53ef\uff0c\u5f53\u7136\u524d\u63d0\u662f\u5bf9\u5e94\u7684\u8bed\u8a00\u63cf\u8ff0\u6709\u590d\u6570\u7684\u7528\u6cd5\u54c8\u3002<\/p>\n\n\n\n
{\n\"hours\": \"{{ count }} hour\",\n \"hours_other\": \"{{ count }} hours\",\n}\n\nt('hours', { count: 5 }) \n\/\/ 5 hours<\/code><\/pre>\n\n\n\n\u5bf9\u4e8e 0 \u6765\u8bf4\uff0c\u5b9e\u9645\u6765\u770b\uff0c\u4f1a\u4f7f\u7528\u590d\u6570\u7684\u7ffb\u8bd1\uff0c\u4f8b\u5982 0 hours\u3002\u5982\u679c\u9700\u8981\u4e3a 0 \u6765\u5355\u72ec\u5b9a\u4e49\u7684\u8bdd\uff0c\u53ef\u4ee5\u6dfb\u52a0 “_zero”\uff0c\u4f8b\u5982\uff1a<\/p>\n\n\n\n
\"hours_zero\": \"Now\"<\/code><\/pre>\n\n\n\n\u9700\u8981\u63d0\u9192\u7684\u662f\uff0c\u5982\u679c\u8fd9\u91cc\u5185\u7f6e\u7684 _zero\u3001_other \u548c\u4f60\u7684\u591a\u8bed\u8a00\u51b2\u7a81\u4e86\uff0c\u8fd8\u662f\u6709\u8fd9\u4e2a\u53ef\u80fd\u7684\uff0c\u90a3\u4e48\u53ef\u4ee5\u4fee\u6539\u4f7f\u7528\u81ea\u5b9a\u4e49\u5206\u9694\u7b26\uff0c\u4f8b\u5982\u4e0b\u9762\u8fd9\u6837\uff1a<\/p>\n\n\n\n
\/\/ i18n.ts\ni18n.use(initReactI18next).init({\n ... \/\/ \u5176\u5b83\u914d\u7f6e \n pluralSeparator: '__', \/\/ \u53cc\u4e0b\u5212\u7ebf\n})<\/code><\/pre>\n\n\n\n\u5177\u4f53\u4f7f\u7528\uff1a<\/p>\n\n\n\n
{\n \"days\": \"{{count}} day\",\n \"days__other\": \"{{count}} days\",\n}<\/code><\/pre>\n\n\n\n\u9700\u8981\u6ce8\u610f\u7684\u662f\uff0c\u4f5c\u4e3a\u5185\u7f6e\u7684\u7ea6\u5b9a\uff0c\u4f7f\u7528\u81ea\u52a8\u5355\u590d\u6570\u65f6\uff0c\u53c2\u6570\u56fa\u5b9a\u4f7f\u7528 count<\/mark><\/strong>\uff0c\u4f7f\u7528\u5176\u5b83\u7684\u5c31\u65e0\u6cd5\u89e3\u6790\u3002<\/p>\n\n\n\n\u8fdb\u9636\u4e94\uff0cTrans \u7ec4\u4ef6<\/p>\n\n\n\n
\u8fd9\u91cc\u76f4\u63a5\u501f\u7528\u7f51\u4e0a\u7684\u4e00\u4e2a\u793a\u4f8b\uff0c\u5047\u5982\u8981\u663e\u793a\u4e0b\u9762\u7684\u6587\u5b57\u201c\u4f60\u597d {userName}\uff0c\u4f60\u6709 {count} \u6761\u672a\u8bfb\u6d88\u606f\u3002\u70b9\u51fb\u67e5\u770b\u3002\u201d\uff0c\u5e76\u4e14\u8fd8\u9700\u8981\u652f\u6301\u70b9\u51fb\u64cd\u4f5c\u3002<\/p>\n\n\n\n
\u5728\u4ee5\u524d\u7684\u5199\u6cd5\u4e2d\uff0c\u6211\u4eec\u9700\u8981\u5c06\u8fd9\u53e5\u8bdd\u5355\u72ec\u7684\u62c6\u5f00\uff0c\u4f7f\u7528\u4e0d\u540c\u7684\u7ec4\u4ef6\u5305\u88c5\u8d77\u6765\uff0c\u4f8b\u5982 count \u5e0c\u671b\u662f\u4e00\u4e2a
\u7ea2\u8272\u7684\u5b57\u4f53\u4e4b\u7c7b\u7684\uff0c\u8fd8\u8981\u653e\u5230\u4e0d\u540c\u7684\u591a\u8bed\u8a00 key \u91cc\u3002\u592a\u8d39\u52b2\u4e86\u3002<\/p>\n\n\n\n
\u4f7f\u7528 Trans \u7ec4\u4ef6\uff0c\u53ef\u4ee5\u8fd9\u4e48\u5199\uff0c\u5927\u5bb6\u7422\u78e8\u7422\u78e8\uff0c\u662f\u4e0d\u662f\u7b80\u5355\u5f88\u591a\u3002<\/p>\n\n\n\n
\/\/ en.json\n{\n \"userMessagesUnread\": \"Hello <1>{{userName}}<\/1>, you have {{count}} unread message. <5>Click to view<\/5>.\",\n \"userMessagesUnread_other\": \"Hello <1>{{userName}}<\/1>, you have {{count}} unread messages. <5>Click to view<\/5>.\"\n}\n\n<Trans\n defaults={t('userMessagesUnread')}\n values={{ count, userName }}\n parent={Text}\n components={{\n 1: <Text style={{ fontWeight: '500' }} \/>,\n 5: <Text style={{ color: '#4682A9' }} onPress={() => {}} \/>\n }}\n\/><\/code><\/pre>\n\n\n\n\u53ef\u4ee5\u770b\u5230\uff0c\u901a\u8fc7\u4f7f\u7528 components \u5c5e\u6027\uff0c\u501f\u52a9\u7d22\u5f15\u53ef\u4ee5\u5c06\u6307\u5b9a\u4f4d\u7f6e\u7684\u5143\u7d20\u7ed9\u66ff\u6362\u5305\u88c5\u8d77\u6765\u3002\u90a3\u4e48\u6709\u4eba\u5c31\u95ee\u4e86\uff0c\u4e3a\u4ec0\u4e48\u8fd9\u91cc\u662f\u6570\u5b571\u548c5\uff0c\u800c\u4e0d\u662f\u5176\u5b83\u7684\u5462\uff1f<\/p>\n\n\n\n
Trans \u7ec4\u4ef6\u5c06\u4e0a\u9762\u7684\u6587\u672c\u8f6c\u6362\u4e3a\u4e0b\u9762\u7684\u7ed3\u6784\uff1a<\/p>\n\n\n\n
[\n 'Hello ',\n { children: [{ user_name: 'Admin' }] },\n ', you have ',\n { count: 10 },\n ' unread messages. ',\n { children: ['Click to view'] },\n '.'\n]<\/code><\/pre>\n\n\n\n\u8fd9\u4e48\u6765\u770b\uff0c\u662f\u4e0d\u662f\u57fa\u4e8e 0 \u7684\u7d22\u5f15\u4f4d\u7f6e\u5c31\u51fa\u6765\u5566\u3002<\/p>\n\n\n\n
\u66f4\u591a\u5185\u5bb9\uff0c\u53ef\u4ee5\u53c2\u8003\u5b98\u65b9\u6587\u6863\u8bf4\u660e\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u5728\u8fc7\u53bb\u7684 React \u548c React Native \u9879\u76ee\u91cc\uff0c\u5bf9\u4e8e\u591a\u8bed\u8a00\u5904\u7406\uff0c\u4f7f\u7528\u7684\u662f react-i18nex […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[101,352],"class_list":["post-1314","post","type-post","status-publish","format-standard","hentry","category-daily","tag-javascript","tag-react"],"_links":{"self":[{"href":"https:\/\/blog.5danyuan.com\/index.php?rest_route=\/wp\/v2\/posts\/1314","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.5danyuan.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.5danyuan.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.5danyuan.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.5danyuan.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1314"}],"version-history":[{"count":0,"href":"https:\/\/blog.5danyuan.com\/index.php?rest_route=\/wp\/v2\/posts\/1314\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.5danyuan.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1314"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.5danyuan.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1314"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.5danyuan.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1314"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}