React-i18next仅iOS端加载翻译失败，Android/Web端正常如何解决？

• i18next-http-backend 仅适配Web端通过HTTP请求加载静态资源，iOS/Android原生端无内置本地HTTP服务，无法直接访问项目的public目录，因此抛出网络请求失败错误
• EISDIR报错是因为路径解析错误，读取逻辑把目录识别为文件尝试读取，触发系统级目录非法操作报错
• React Native/iOS 默认不会将项目public目录打包进入原生应用的资源包，就算路径正确也找不到对应文件

方案1：适配多端的本地资源加载（推荐） #

步骤1：安装适配原生端的后端插件 #

替换http后端为文件系统后端，安装依赖：

npm install i18next-fs-backend expo-file-system

步骤2：配置Expo静态资源打包规则 #

修改app.json，将翻译目录加入资产打包列表，确保iOS/Android打包时会包含翻译文件：

{
  "expo": {
    "assets": [
      "./public/locales/"
    ]
  }
}

配置后需要重新执行expo prebuild 让原生配置生效。

步骤3：调整i18n初始化配置 #

新增平台适配的资源加载路径：

import * as Localization from 'expo-localization'
import i18n from 'i18next'
import Backend from 'i18next-fs-backend'
import { initReactI18next } from 'react-i18next'
import * as FileSystem from 'expo-file-system'
import { Platform } from 'react-native'

i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    compatibilityJSON: 'v3',
    debug: true,
    fallbackLng: 'en-US',
    interpolation: { escapeValue: false },
    backend: {
      loadPath: Platform.OS === 'web' 
        ? '/locales/{{lng}}/{{ns}}.json'
        : `${FileSystem.bundleDirectory}/locales/{{lng}}/{{ns}}.json`
    }
  })

i18n.changeLanguage(Localization.locale)

export default i18n

方案2：全量导入翻译资源（简单稳定，适合翻译量较小的项目） #

不需要任何后端插件，直接把所有翻译文件提前导入到i18n配置中，无跨端加载问题：

import * as Localization from 'expo-localization'
import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
// 导入所有翻译文件
import enTranslation from './public/locales/en-US/translation.json'
import zhTranslation from './public/locales/zh-CN/translation.json'

i18n
  .use(initReactI18next)
  .init({
    compatibilityJSON: 'v3',
    debug: true,
    fallbackLng: 'en-US',
    interpolation: { escapeValue: false },
    // 直接配置翻译资源
    resources: {
      'en-US': {
        translation: enTranslation
      },
      'zh-CN': {
        translation: zhTranslation
      }
    }
  })

i18n.changeLanguage(Localization.locale)

export default i18n

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