React-Native i18next：翻译仅触发一次

Question

在我的React-Native应用程序中使用react-i18next时，启动应用程序时一切正常。每个标签都会翻译成应用程序中保存的语言。

当我进入设置页面并“第一次”更新语言时，整个应用程序都会更改为新语言。 到目前为止一切顺利。 第二次

更新语言时，仅更新设置页面。

其他页面不会被“t()”函数触发重新渲染。 我在应用程序的每个页面/组件以及其他一些挂钩中使用 useTranslations() 挂钩

。

如果有帮助，这是我的配置：

i18n.js

const resources = {
  en: {
    translation: enTranslation,
  },
  nl: {
    translation: nlTranslation,
  },
  fr: {
    translation: frTranslation,
  },
};

i18n
  .use(RNLanguageDetector)
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    debug: true,
    resources,
    compatibilityJSON: 'v3',
    ns: [],
    fallbackLng: 'en',

    supportedLngs: ['en', 'nl', 'fr'],

    keySeparator: false, // we do not use keys in form messages.welcome
    nsSeparator: false, // we do not use keys in form messages.welcome
    namespaceSeparator: false,

    interpolation: {
      escapeValue: false, // react already safes from xss
    },
    returnNull: false,

  });

好的，问题是监听事件时出现了一个小错误。

Answer 1

在我的语言设置中，我在

languageChanged

中添加了

useFocusEvent

 的监听器：

useFocusEffect(
useCallback(() => {
  i18n.on('loaded', languageSetComplete);

  i18n.on('languageChanged', languageSetComplete);

  return () => {
    i18n.off('loaded');
    i18n.off('languageChanged');
  };
}, [i18n, languageSetComplete])

我不知道这还删除了整个应用程序中

loaded

和

languageChanged 事件的 ALL

 监听器。 

useTranslation

 钩子也如此

将其更改为

时

useFocusEffect(
useCallback(() => {
  i18n.on('loaded', languageSetComplete);

  i18n.on('languageChanged', languageSetComplete);

  return () => {
    i18n.off('loaded', languageSetComplete);
    i18n.off('languageChanged', languageSetComplete);
  };
}, [i18n, languageSetComplete])

一切似乎都在运作只是把问题留在这里给和我一样缺乏知识的人。