reactjs - i18next 从数据库导入翻译

Question

我正在尝试将我的语言环境移动到数据库。现在我们正在使用 i18n，这是配置:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import { defaultLanguage, languagesResources } from '@config/languageConfig';
import { makeSelectBaseLanguage } from '@redux/settings/selectors';
import { store } from '@redux/index';
import Fetch from 'i18next-fetch-backend';

// translation catalog
console.log('fetch', Fetch);
const languageDetector = {
  type: 'languageDetector',
  async: true,
  detect: (cb: (baseLanguage: string) => void) => {
    let prevLanguage: string;
    store.subscribe(() => {
      const selectBaseLanguage = makeSelectBaseLanguage();
      console.log('ciaoo', selectBaseLanguage);
      const baseLanguage = selectBaseLanguage(store.getState());
      if (baseLanguage !== prevLanguage) {
        prevLanguage = baseLanguage;
        cb(baseLanguage);
      }
    });
  },
  init: () => {},
  cacheUserLanguage: () => {},
};

i18n
  .use(languageDetector)
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    debug: true,
    resources: languagesResources,
    // language to use if translations in user language are not available.
    fallbackLng: defaultLanguage,
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },

    react: {
      wait: false,
      useSuspense: false,
    },
  });

export default i18n;

这是资源 languageResources

    /* tslint:disable */
import * as en from './locales/en.json';
import * as en_HttpError from './locales/en.httpError.json';
import * as tr from './locales/tr.json';
import * as tr_HttpError from './locales/tr.httpError.json';
import * as en_Guide from './locales/en.guide.json';
import * as tr_Guide from './locales/tr.guide.json';
import { onReadTranslationData } from '@utils/realtimeDatabase';

const data = onReadTranslationData();
console.log('dataaa', data);
export const scrollPickerLanguage = [
  {
    id: 1,
    title: 'ENGLISH',
    value: 'en',
  },
  {
    id: 2,
    title: 'TURKISH',
    value: 'tr',
  },
];
export const defaultLanguage = 'en';
export const languagesResources = {
  en: { ...en, httpError: en_HttpError, guide: en_Guide },
  tr: { ...tr, httpError: tr_HttpError, guide: tr_Guide },
};

这是功能

import database from '@react-native-firebase/database';

export const onReadTranslationData = () => {
  const translations = database()
    .ref('/languages')
    .once('value')
    .then(snapshot => {
      const languages = { en: snapshot.child('en').val(), tr: snapshot.child('tr').val() };
      return languages;
    });
  return translations;
};

现在，我的主要问题是，如果我从 onReadTranslationData 收到正确的数据我尝试改变 tr: { ...tr, httpError: tr_HttpError, guide: tr_Guide },在 languageResources我什至无法启动应用程序，这是因为我以异步方式接收数据并且第一个数据为空。

有一种方法可以避免此错误，并从 api/数据库加载翻译？

我尝试使用这个库 https://github.com/perrin4869/i18next-fetch-backend但我没有一个好的结果。

Answer 1

您应该添加翻译 after init使用 addResourceBundle .

import database from '@react-native-firebase/database';

export const onReadTranslationData = () => {
  const translations = database()
    .ref('/languages')
    .once('value')
    .then(snapshot => {
      // this will load the new languages
      i18next.addResourceBundle('en', 'namespace1', snapshot.child('en').val());
      i18next.addResourceBundle('tr', 'namespace1', snapshot.child('tr').val());
    });
  return translations;
};