React-Native i18next翻译仅触发一次问题求助

问题场景 #

启动应用时所有翻译正常，首次切换语言全应用更新正常，但第二次切换语言仅设置页更新，其他页面的t()函数不触发重新渲染，所有页面/组件及部分自定义hooks均使用了useTranslation() hook。

配置文件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,

  });

排查方向与解决方案 #

1. 规范语言切换的调用方式 #

必须通过i18n实例的changeLanguage方法切换语言，且确保异步操作完成，避免状态不一致：

import i18n from './i18n';

const changeAppLanguage = async (lng) => {
  await i18n.changeLanguage(lng);
  // 如需持久化，可在此将语言存入AsyncStorage等存储
};

不要直接修改存储的语言值而不调用changeLanguage，否则无法触发全局的翻译更新事件。

2. 修复自定义hooks中的缓存问题 #

如果自定义hooks中使用useTranslation，避免在useMemo/useCallback中忽略语言变化的依赖：

• 错误示例（无语言依赖）：

const useCustomHook = () => {
  const { t } = useTranslation();
  const translatedText = useMemo(() => t('some_key'), []);
  return translatedText;
};

• 正确写法（加入语言依赖）：

const useCustomHook = () => {
  const { t, i18n } = useTranslation();
  const translatedText = useMemo(() => t('some_key'), [t, i18n.language]);
  return translatedText;
};

3. 禁用RNLanguageDetector的缓存冲突 #

RNLanguageDetector默认可能缓存语言检测结果，导致手动切换的语言被缓存覆盖。初始化时禁用缓存：

i18n.use(RNLanguageDetector).use(initReactI18next).init({
  // 原有配置...
  detection: {
    cache: false, // 禁用缓存
  },
});

或者在切换语言后，同步更新存储中的语言值，确保检测器读取最新值。

4. 处理React.memo组件的依赖问题 #

使用React.memo的组件需要将i18n.language加入比较依赖，否则语言变化时不会重新渲染：

const MemoizedComponent = React.memo(({ t, i18n }) => {
  return <Text>{t('key')}</Text>;
}, (prevProps, nextProps) => {
  return prevProps.i18n.language === nextProps.i18n.language;
});

// 父组件传入i18n实例
const ParentComponent = () => {
  const { t, i18n } = useTranslation();
  return <MemoizedComponent t={t} i18n={i18n} />;
};

5. 确保全局唯一的i18n实例 #

检查应用中是否初始化了多个i18n实例，所有组件和hooks必须导入同一个i18n.js中的实例，避免更新不同步。

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