React Native中i18next无法加载YAML翻译文件求助

核心原因 #

Node.js、webpack等构建工具默认不支持解析YAML文件，直接require或导入YAML文件时，工具无法正确转换为JavaScript对象，导致i18next拿到的是未解析的原始内容或空结构，进而无法显示翻译。

解决方案 #

1. 手动解析YAML文件（基础方案） #

• 首先安装YAML解析依赖：

  npm install js-yaml --save
  

• 修改i18n.ts代码，读取并解析YAML文件：

  import i18n from 'i18next'
  import { initReactI18next } from 'react-i18next'
  import yaml from 'js-yaml'
  import fs from 'fs'
  import path from 'path'
  
  // 读取YAML文件内容并解析为JS对象
  const yamlFilePath = path.resolve(__dirname, './enyaml.yml')
  const yamlContent = fs.readFileSync(yamlFilePath, 'utf8')
  const translation = yaml.load(yamlContent) as Record<string, any>
  
  export const resources = {
    en: {
      translation,
    },
  }
  
  i18n.use(initReactI18next).init({
    resources,
    lng: 'en',
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false,
    },
  })
  

2. 前端项目适配（如Create React App） #

如果是前端项目，无法直接使用fs模块，改用raw-loader读取文件内容后解析：

• 安装依赖：

  npm install js-yaml raw-loader --save-dev
  

• 修改导入方式：

  import i18n from 'i18next'
  import { initReactI18next } from 'react-i18next'
  import yaml from 'js-yaml'
  // 用raw-loader导入YAML原始内容
  import translationRaw from 'raw-loader!./enyaml.yml'
  
  const translation = yaml.load(translationRaw) as Record<string, any>
  
  export const resources = {
    en: {
      translation,
    },
  }
  
  i18n.use(initReactI18next).init({
    resources,
    lng: 'en',
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false,
    },
  })
  

3. 使用i18next专用YAML后端插件（推荐方案） #

使用i18next-yaml-backend插件自动处理YAML文件加载，无需手动解析：

• 安装插件：

  npm install i18next-yaml-backend --save
  

• 重构i18n.ts配置：

  import i18n from 'i18next'
  import { initReactI18next } from 'react-i18next'
  import Backend from 'i18next-yaml-backend'
  
  i18n
    .use(Backend) // 启用YAML后端插件
    .use(initReactI18next)
    .init({
      backend: {
        loadPath: './{{lng}}yaml.yml', // 匹配你的文件命名规则，这里对应enyaml.yml
      },
      lng: 'en',
      fallbackLng: 'en',
      interpolation: {
        escapeValue: false,
      },
    })
  

4. 检查YAML文件格式 #

YAML对格式要求严格，确保：

• 用空格缩进（禁止用Tab）
• 键值对的冒号后必须加空格，比如title: Home而非title:Home
• 嵌套层级一致，示例正确格式：

  home:
    title: Welcome to My App
    button: Get Started
  about:
    description: This is a demo app
  

5. 验证解析结果 #

在代码中添加console.log(translation)，确认解析后的对象结构与之前的JSON文件完全一致。如果结构异常，检查YAML格式或解析逻辑。

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