i18следующий импорт перевода из базы данных - PullRequest
Новая
       8

i18следующий импорт перевода из базы данных

1 голос
/ 08 апреля 2020

Я пытаюсь переместить мои локали в базу данных. Прямо сейчас мы используем 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 Я не могу даже запустить приложение, это потому, что я получаю данные в asyn c way и первые данные нулевые.

Есть способ избежать этой ошибки и загрузить переводы из API / базы данных?

Я пытался использовать эту библиотеку https://github.com/perrin4869/i18next-fetch-backend, но у меня не получился хороший результат.

1 Ответ

1 голос
/ 09 апреля 2020

Вы должны добавить переводы после инициализации , используя 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;
};
...