如何在React Native导航器中用i18next动态更新多语言标题

问题描述 #

我目前在React Native项目中用i18next做多语言配置，但切换语言时必须重启应用才能更新导航标题。当前导航配置里直接用i18next.t()设置静态标题，代码如下：

[ScreenNames.PartnerTab]: {
  screen: PartnersNavigator,
  navigationOptions: {
    header: null,
    title: i18next.t('tabs:partners'),
    gesturesEnabled: false,
    tabBarIcon: createTabBarIcon(TabIcon.Partners),
    tabBarOnPress: onTabPress,
  },
},

语言切换逻辑是调用i18n.changeLanguage(languageCode)。想知道能不能用react-i18next的useTranslation或withTranslation实现语言切换时动态更新导航标题，无需重启应用？

解决方案 #

当然可以通过useTranslation（函数组件）或withTranslation（类组件）实现动态更新，核心思路是将导航标题的设置从静态配置转移到屏幕组件内部，监听i18next的语言变化事件，实时调用navigation.setOptions()更新标题。

方法1：函数组件使用useTranslation

在对应屏幕组件中，利用useTranslation获取翻译函数t和i18n实例，通过useEffect监听语言变化并更新导航标题：

import { useTranslation } from 'react-i18next';
import { useEffect } from 'react';

function PartnersScreen({ navigation }) {
  const { t, i18n } = useTranslation();

  useEffect(() => {
    // 初始化设置标题
    navigation.setOptions({ title: t('tabs:partners') });
    
    // 监听语言切换事件，实时更新标题
    const handleLanguageChange = () => {
      navigation.setOptions({ title: t('tabs:partners') });
    };
    
    i18n.on('languageChanged', handleLanguageChange);
    
    // 组件卸载时移除监听
    return () => i18n.off('languageChanged', handleLanguageChange);
  }, [t, i18n, navigation]);

  // 组件渲染内容
  return (/* ... */);
}

同时修改导航配置，移除静态title（或留空）：

[ScreenNames.PartnerTab]: {
  screen: PartnersNavigator,
  navigationOptions: {
    header: null,
    // 不再设置静态title，由组件内部动态更新
    gesturesEnabled: false,
    tabBarIcon: createTabBarIcon(TabIcon.Partners),
    tabBarOnPress: onTabPress,
  },
},

方法2：类组件使用withTranslation

如果是类组件，通过withTranslation高阶组件注入翻译能力，在生命周期方法中监听语言变化：

import { withTranslation } from 'react-i18next';
import React from 'react';

class PartnersScreen extends React.Component {
  componentDidMount() {
    const { t, i18n, navigation } = this.props;
    // 初始化标题
    navigation.setOptions({ title: t('tabs:partners') });
    
    // 绑定语言变化监听函数
    this.handleLanguageChange = () => {
      navigation.setOptions({ title: t('tabs:partners') });
    };
    
    i18n.on('languageChanged', this.handleLanguageChange);
  }

  componentWillUnmount() {
    const { i18n } = this.props;
    // 移除监听，避免内存泄漏
    i18n.off('languageChanged', this.handleLanguageChange);
  }

  render() {
    // 组件渲染内容
    return (/* ... */);
  }
}

// 用withTranslation包裹组件
export default withTranslation()(PartnersScreen);

原理说明 #

原来的静态navigationOptions在导航初始化时就会执行i18next.t()并固定标题值，后续语言切换时不会重新计算。通过将标题逻辑移到组件内部，监听languageChanged事件，每次切换语言时调用navigation.setOptions()就能实时更新导航栏标题，无需重启应用。

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