国际化

配置英文与简体中文本地化。

Expo 模板用 i18n-jsexpo-localization 本地化产品 UI。它随附英文和简体中文 catalogs,暴露一个小型 useI18n() hook,并允许用户在 Profile screen 切换语言。

关键文件

i18n.tsx
app/_layout.tsx

I18nProvider 挂在 root provider stack 中,暴露:

API作用
t(key, options?)通过 i18n-js 翻译 catalog keys
locale当前支持的 locale:enzh
setLocale(locale)持久化并应用语言 override

Provider 会在 saved preference hydrate 前返回 null,避免界面先用一种语言渲染、 随后立刻切换到另一种语言。

Locale persistence

语言存储 key 是 app_locale。Native 平台使用 expo-secure-store,web 使用 window.localStorage。代码导入了 expo-localization,并通过 Localization.getLocales()?.[0]?.languageTag 读取设备语言。

当前模板代码中,getStoredLocale() 会把缺失的 stored value normalize 成 en, 所以 fresh install 上设备语言实际上不会优先生效。如果希望首次启动跟随设备语言, 在 app_locale 不存在时返回 null,再 fallback 到 device locale。

添加语言

添加 catalog

创建 lib/i18n/<locale>.json,并保持与 en.jsonzh.json 相同的 key shape。

lib/i18n.tsx 注册

导入 JSON 文件,加入 translations,并更新用户可见的语言标签。

Normalize locale

如果语言需要 pt-BRzh-Hant 或 region-specific fallback,扩展 normalizeLocale()

添加 picker 选项

app/profile.tsx 定义语言 picker rows。在那里加入新选项,让用户可以持久化 override。

验证两个平台

运行 native 与 web,从 Profile 切换语言,杀掉并重启 app,确认选择会保留。

哪些内容已本地化

大多数 app surfaces 都调用 t(...):auth、profile、Home、drawer labels、todos、 paywall/subscription、legal consent、permissions、notifications、showcase catalog rows 以及 showcase demo screens。

Component gallery 是刻意 English-only。它的 catalog 注释说明文案直接写在 lib/component/component-catalog.tsapp/component/[slug].tsx 的 demo labels 也使用 inline English。除非你把这些字符串移入 catalogs,否则把这个 tab 视为 developer-facing reference。

还有少量 inline operational toasts,例如 auth routes 中的 password-reset success copy。 在宣称完整本地化前,先搜索 app/ 中的 string literals。

相关页面

On this page