Back to Details

react-native-i18n-workflow

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

React Native i18n Workflow

React Native i18n 工作流

This skill handles the internationalization (i18n) workflow for the Fitness Tracker App, ensuring type-safe translations and consistent language support.
本技能为Fitness Tracker App处理国际化（i18n）工作流，确保类型安全的翻译和一致的语言支持。

When to Use This Skill

何时使用本技能

Use this skill when you need to:
  • Add new translatable strings to the app
  • Support a new language
  • Implement interpolation (e.g., "Hello {{name}}!")
  • Use pluralization in translations
  • Handle RTL (Right-to-Left) language detection and layout
  • Ensure type safety for translation keys
适用于以下场景：
  • 向应用中添加新的可翻译字符串
  • 支持新的语言
  • 实现插值功能（例如："Hello {{name}}!"）
  • 在翻译中使用复数形式
  • 处理RTL（从右到左）语言的检测与布局
  • 确保翻译键的类型安全

Translation Files

翻译文件

Translations are stored in 
app/i18n/
with one file per language (e.g., 
en.ts
, 
ja.ts
).
翻译文件存储在
app/i18n/
目录下，每种语言对应一个文件（例如
en.ts
、
ja.ts
）。

English (Source) Pattern

英文（源语言）模板

typescript
// app/i18n/en.ts
const en = {
  common: {
    ok: "OK!",
    cancel: "Cancel",
  },
  homeScreen: {
    title: "My Collection",
    deleteAlertMessage: "Delete this {{category}} workout?",
  }
}
export default en
export type Translations = typeof en
typescript
// app/i18n/en.ts
const en = {
  common: {
    ok: "OK!",
    cancel: "Cancel",
  },
  homeScreen: {
    title: "My Collection",
    deleteAlertMessage: "Delete this {{category}} workout?",
  }
}
export default en
export type Translations = typeof en

Using Translations

使用翻译内容

1. The 
translate
Helper

1. 
translate
辅助函数

Use the standalone 
translate
function for non-component logic:
typescript
import { translate } from "@/i18n"

const title = translate("homeScreen:title")
const message = translate("homeScreen:deleteAlertMessage", { category: "cat" })
在非组件逻辑中使用独立的
translate
函数：
typescript
import { translate } from "@/i18n"

const title = translate("homeScreen:title")
const message = translate("homeScreen:deleteAlertMessage", { category: "cat" })

2. The 
tx
Prop

2. 
tx
属性

Many components support a 
tx
prop for automatic translation:
tsx
<Text tx="homeScreen:title" preset="heading" />
<Button tx="common:ok" onPress={handlePress} />
许多组件支持通过
tx
属性实现自动翻译：
tsx
<Text tx="homeScreen:title" preset="heading" />
<Button tx="common:ok" onPress={handlePress} />

3. The 
useTranslation
Hook

3. 
useTranslation
钩子

For complex cases or dynamic content:
tsx
import { useTranslation } from "react-i18next"

const { t } = useTranslation()
return <Text>{t("homeScreen:title")}</Text>
适用于复杂场景或动态内容：
tsx
import { useTranslation } from "react-i18next"

const { t } = useTranslation()
return <Text>{t("homeScreen:title")}</Text>

Advanced Patterns

进阶用法

Interpolation

插值功能

Keys: 
greeting: "Hello, {{name}}!"
Usage: 
translate("greeting", { name: "Mirza" })
键示例：
greeting: "Hello, {{name}}!"
用法：
translate("greeting", { name: "Mirza" })

Pluralization

复数形式

Keys: 
pet_one: "{{count}} pet"
pet_other: "{{count}} pets"
Usage: 
translate("pet", { count: 5 })
键示例： 
pet_one: "{{count}} pet"
pet_other: "{{count}} pets"
用法：
translate("pet", { count: 5 })

Key Path Types

键路径类型

We use 
TxKeyPath
to ensure keys exist at compile time. Format: 
section:key
for top level, 
section:nested.key
for deeper levels.
我们使用
TxKeyPath
确保编译时键已存在。格式：顶层键使用
section:key
，深层键使用
section:nested.key
。

References

参考资料

See TRANSLATION_STRUCTURE.md for detailed file patterns.
See I18N_BEST_PRACTICES.md for naming conventions and workflow steps.
详细的文件模板请参考TRANSLATION_STRUCTURE.md。 命名规范和工作流步骤请参考I18N_BEST_PRACTICES.md。