rtn-i18n
v0.0.8
Published
react native i18n
Downloads
3
Maintainers
Readme
rtn-i18n
安装
npm i rtn-i18n
使用
注意:如果更换语言但页面没有重新加载,那么需要在该组件中使用 useLangCode
钩子函数
import {createReactI18n, formatReactNode} from 'rtn-i18n';
export enum LangCode {
zhHans = 'zh-Hans',
en = 'en',
}
interface LangItem {
label: string;
code: LangCode;
}
export const langList: ReadonlyArray<Readonly<LangItem>> = [
{label: '简体中文', code: LangCode.zhHans},
{label: 'English', code: LangCode.en},
];
export const I18n = createReactI18n(
{
[LangCode.zhHans]: {
Hello: '你好,{0}',
World: '世界',
} as const,
[LangCode.en]: {
Hello: 'Hello, {0}',
World: 'World',
} as const,
},
{
// 匹配系统语言
// 'zh', 'en' 这类 `code` 几乎可以匹配所有系统的 `langCode`, 所以可以忽略 `langScope`
// 'zh-Hans' 这种 `code` 只能匹配 `zh-Hans-*` 这类 code, 就需要配置 `langScope`
langScope: {
[LangCode.zhHans]: ['zh-Hans', 'zh-CN', 'zh-SG', 'zh-MO'],
},
// 调用 setLangCode 时,传入 native 的值
langMap: {
[LangCode.zhHans]: {
android: 'zh-CN',
},
},
},
);
// 获取当前语言代码。
I18n.getLangCode();
I18n.t('Hello', I18n.t('World'));
formatReactNode(I18n.t('Hello'), I18n.t('World'));
说明
- 调用
setLangCode
时,默认传入code
值,如果需要传入对应系统可识别的值(例如:android 平台不能传入zh-Hans
,而应该传入zh-CN
),需要在langMap
中配置。 - 调用
setLangCode
时,android 平台会更改 native 端的Locale
值,并保存到本地,下一次启动时会自动设置为对应值。 langScope
中的值为系统可识别的值,例如:ios 的zh-Hans-CN
可匹配zh-Hans
,android 的zh-CN
。