国际化
#
例子#
基本用法以下是国际化的基本例子,演示了切换按钮上的中英文文案:
我们用的是 LangSetDefaultString
去设置具体用到的语言翻译数据, 然后用 LangSetCurrent
去设置当前语言。
i18n-switch
export interface ILang extends ILangBase { // ave built-in language key AppTitle: string;
// user defined key SwitchLang: string;}
export function onInitI18n(app: App) { const i18n: Ii18n<ILang> = { t(key, toReplace: object = {}) { let result = app.LangGetString(key); Object.keys(toReplace).forEach((each) => { result = result.replace(`{{${each}}}`, toReplace[each]); }); return result; }, switch(this: Ii18n, id) { app.LangSetDefaultString(id, this.lang[id]); app.LangSetCurrent(id); }, lang: { [CultureId.en_us]: { // ave built-in language key __FontStd: "Segoe UI", AppTitle: 'My App',
// user defined key SwitchLang: 'Switch Lang', }, [CultureId.zh_cn]: { __FontStd: "Microsoft YaHei UI", AppTitle: '我的应用',
SwitchLang: '切换语言' }, }, };
const context = getAppContext(); context.setI18n(i18n);}
国际化的支持是内置的,就是说,只要你创建 UI 组件的时候,传了相应参数(对应文案的 key),当你切换语言的时候,UI 组件上的文案是自动改变的。
import { onInitI18n } from "./i18n-switch";
function onInit(app: App) { onInitI18n(app); const context = getAppContext(); const i18n = context.getI18n(); i18n.switch(CultureId.en_us);}
export function App() { const [currentLang, setCurrentLang] = useState<CultureId>(CultureId.en_us);
const onSwitchLang: IButtonComponentProps["onClick"] = () => { const context = getAppContext(); const i18n = context.getI18n(); if (currentLang === CultureId.en_us) { setCurrentLang(CultureId.zh_cn); i18n.switch(CultureId.zh_cn); } else if (currentLang === CultureId.zh_cn) { setCurrentLang(CultureId.en_us); i18n.switch(CultureId.en_us); } };
return ( <Window onInit={onInit}> <DemoLayout> <Button langKey="SwitchLang" onClick={onSwitchLang}></Button> </DemoLayout> </Window> );}
#
APIexport interface IApp { LangSetDefaultString(cid: CultureId, v: any): App; LangSetCurrent(n: CultureId): App;}
export enum CultureId { Default /**/ = -1, en_us /**/ = 0, ... zh_cn /**/ = 562, ...}