React Native（Expo）项目如何搭建集中式i18n多语言架构？

1. 安装核心依赖 #

首选i18next + react-i18next组合，搭配Expo工具实现语言自动检测和适配：

npx expo install i18next react-i18next i18next-http-backend i18next-browser-languagedetector expo-localization

2. 建立集中化目录结构 #

在项目根目录创建i18n文件夹，统一管理配置和翻译文件，避免零散分布：

src/
└── i18n/
    ├── translations/
    │   ├── en.json   # 英文翻译资源
    │   └── zh.json   # 中文翻译资源
    └── index.js      # i18n全局配置入口

3. 配置i18n核心逻辑 #

在i18n/index.js中完成全局初始化，实现自动语言检测、翻译文件加载和缓存：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import { getLocales } from 'expo-localization';

// 获取系统默认语言编码
const systemLanguage = getLocales()[0].languageCode;

i18n
  // 加载本地翻译文件
  .use(Backend)
  // 自动检测用户语言（优先缓存，其次系统设置）
  .use(LanguageDetector)
  // 关联react-i18next上下文
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',       // 兜底语言
    debug: __DEV__,          // 开发环境开启调试日志
    lng: systemLanguage,     // 默认使用系统语言
    interpolation: {
      escapeValue: false,    // React已处理XSS，无需额外转义
    },
    // 配置翻译文件加载路径
    backend: {
      loadPath: './src/i18n/translations/{{lng}}.json',
    },
    detection: {
      order: ['localStorage', 'navigator'],
      caches: ['localStorage'], // 缓存用户选择的语言
    },
  });

export default i18n;

4. 编写集中式翻译文件 #

在translations文件夹的语言文件中，按业务模块分类管理文本，便于维护：

// zh.json
{
  "common": {
    "confirm": "确认",
    "cancel": "取消",
    "logout": "退出登录"
  },
  "home": {
    "title": "首页",
    "welcome": "欢迎回来，{{name}}"
  },
  "profile": {
    "edit": "编辑资料",
    "changeLang": "切换语言"
  }
}

// en.json
{
  "common": {
    "confirm": "Confirm",
    "cancel": "Cancel",
    "logout": "Logout"
  },
  "home": {
    "title": "Home",
    "welcome": "Welcome back, {{name}}"
  },
  "profile": {
    "edit": "Edit Profile",
    "changeLang": "Change Language"
  }
}

5. 全局注入i18n上下文 #

在App.js中导入配置好的i18n实例，用I18nextProvider包裹整个应用，让所有组件共享翻译能力：

import { StatusBar } from 'expo-status-bar';
import { SafeAreaView } from 'react-native';
import { I18nextProvider } from 'react-i18next';
import i18n from './src/i18n';
import HomeScreen from './src/screens/HomeScreen';

export default function App() {
  return (
    <I18nextProvider i18n={i18n}>
      <SafeAreaView style={{ flex: 1 }}>
        <HomeScreen />
        <StatusBar style="auto" />
      </SafeAreaView>
    </I18nextProvider>
  );
}

6. 组件中统一使用翻译 #

任何页面/组件只需通过useTranslation hook获取t函数，直接调用翻译文本，无需重复配置：

// src/screens/HomeScreen.js
import { View, Text, Button } from 'react-native';
import { useTranslation } from 'react-i18next';

export default function HomeScreen() {
  const { t, i18n } = useTranslation();

  const toggleLanguage = () => {
    const targetLang = i18n.language === 'zh' ? 'en' : 'zh';
    i18n.changeLanguage(targetLang);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 20 }}>{t('home.title')}</Text>
      <Text style={{ marginVertical: 10 }}>{t('home.welcome', { name: 'Alice' })}</Text>
      <Button title={t('profile.changeLang')} onPress={toggleLanguage} />
    </View>
  );
}

进阶优化建议 #

• 翻译文件拆分：大型项目可按业务模块拆分翻译文件（如home.json、profile.json），通过i18n的namespaces配置按需加载
• 持久化存储：用expo-secure-store替代localStorage存储用户语言选择，提升安全性
• 类型校验：添加TypeScript类型定义，对翻译键做静态校验，避免拼写错误

内容的提问来源于stack exchange，提问作者sofwaredevelop