React Native中i18next-resources-to-backend加载本地资源失败求助

你的代码主要存在以下几个问题导致本地资源加载失败：

1. 命名空间不匹配 #

i18next默认使用的命名空间是translation（单数），但你的本地资源定义在translations（复数）命名空间下。如果没有额外配置默认命名空间，i18next会尝试加载默认的translation命名空间，自然找不到你定义的本地资源。

2. ChainedBackend配置项长度不匹配 #

backends数组包含了2个后端（HttpBackend和ResourceBackend），但backendOptions数组仅提供了HttpBackend的配置，缺少对应ResourceBackend的配置项（即使是空对象也需要保持数组长度一致，否则可能导致后端初始化异常）。

3. HttpBackend请求回调数据传递错误 #

你在request回调中传递了完整的Axios响应对象res，而HttpBackend期望接收的是实际的资源数据（即响应体res.data），这是潜在的错误（虽然你说后端加载正常，但可能后端返回的结构刚好巧合匹配）。

修正后的代码 #

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import ChainedBackend from 'i18next-chained-backend';
import HttpBackend from 'i18next-http-backend';
import ResourceBackend from 'i18next-resources-to-backend';
import Axios from 'axios';

// 本地资源使用默认命名空间`translation`
const EN = {
  sayHi: 'Say hi',
};

const VI = {
  sayHi: 'Xin chào',
};

const localResources = {
  en: {
    translation: EN,
  },
  vi: {
    translation: VI,
  },
};

i18n
  .use(ChainedBackend)
  .use(initReactI18next)
  .init({
    compatibilityJSON: 'v3',
    react: {
      useSuspense: false,
    },
    lng: 'en',
    fallbackLng: 'en',
    load: 'languageOnly',
    backend: {
      backends: [
        HttpBackend,
        // 传入正确结构的本地资源
        ResourceBackend(localResources),
      ],
      backendOptions: [
        {
          loadPath: 'http://localhost:3001/translation/{{lng}}.json',
          parse: data => data,
          request: (options, url, payload, callback) => {
            Axios.get(url)
              .then(res => {
                // 传递响应体数据而非完整响应对象
                callback(null, res.data);
              })
              .catch(e => {
                console.log(e);
                callback(e, null);
              });
          },
        },
        {}, // 对应ResourceBackend的空配置项，保持数组长度匹配
      ],
    },
  });

额外说明 #

• 如果你希望优先加载本地资源，后端作为 fallback，可以调换backends数组的顺序，将ResourceBackend放在前面：

  backends: [
    ResourceBackend(localResources),
    HttpBackend,
  ],
  

• 如果一定要使用translations作为命名空间，需要在i18n初始化配置中添加defaultNS: 'translations'，同时调整本地资源和后端返回的结构，确保命名空间一致。

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