如何修改React Navigation抽屉内的路由标题以适配多语言？

嗨，我来帮你搞定这个抽屉标题替换的问题～ 你现在的抽屉是默认用路由名称当标题，要换成目标语言的话，只需要给每个抽屉路由显式配置drawerLabel就行，具体步骤如下：

1. 静态替换标题（直接写目标语言文本） #

你可以在allDrawerOptions里给每个screen添加navigationOptions，用drawerLabel指定想要显示的标题，直接替换默认的路由名称：

const allDrawerOptions = {
  NotificationHistory: {
    screen: NotificationHistory,
    navigationOptions: {
      // 这里写目标语言的对应文本，比如法语的"Historique des notifications"
      drawerLabel: 'Historique des notifications'
    }
  },
  CameraRegistration: {
    screen: CameraRegistration,
    navigationOptions: {
      drawerLabel: 'Inscription par caméra'
    }
  },
  Settings: {
    screen: Settings,
    navigationOptions: {
      drawerLabel: 'Paramètres'
    }
  },
  Info: {
    screen: Info,
    navigationOptions: {
      drawerLabel: 'Informations'
    }
  }
};

// 剩下的DrawerNavigator和StackNavigator配置保持不变
const drawerForNotificationHistory = DrawerNavigator(
  allDrawerOptions,
  { initialRouteName: 'NotificationHistory' }
);

这样设置后，抽屉里显示的就不再是NotificationHistory这类路由键，而是你指定的目标语言文本了。

2. 动态多语言适配（结合i18n库） #

如果你的APP需要支持多种语言切换，推荐用react-i18next这类多语言库来动态获取翻译文本。假设你已经配置好了i18n实例（比如定义了不同语言的翻译键），可以这样修改：

第一步：确保i18n配置完成 #

比如你的法语翻译文件里有这些键值对：

{
  "notificationHistory": "Historique des notifications",
  "cameraRegistration": "Inscription par caméra",
  "settings": "Paramètres",
  "info": "Informations"
}

第二步：在抽屉路由配置中动态获取翻译文本 #

import i18n from './path/to/your/i18n/config'; // 导入你的i18n实例

const allDrawerOptions = {
  NotificationHistory: {
    screen: NotificationHistory,
    navigationOptions: () => ({
      // 用i18n.t()获取对应语言的文本，切换语言时会自动更新
      drawerLabel: i18n.t('notificationHistory')
    })
  },
  CameraRegistration: {
    screen: CameraRegistration,
    navigationOptions: () => ({
      drawerLabel: i18n.t('cameraRegistration')
    })
  },
  Settings: {
    screen: Settings,
    navigationOptions: () => ({
      drawerLabel: i18n.t('settings')
    })
  },
  Info: {
    screen: Info,
    navigationOptions: () => ({
      drawerLabel: i18n.t('info')
    })
  }
};

如果需要自定义标题样式（比如匹配抽屉的选中态颜色），还可以让drawerLabel返回一个Text组件：

navigationOptions: () => ({
  drawerLabel: ({ tintColor }) => (
    <Text style={{ color: tintColor, fontSize: 16 }}>
      {i18n.t('notificationHistory')}
    </Text>
  )
})

为什么默认显示路由名称？ #

因为React Navigation的DrawerNavigator默认会把路由对象的键（比如NotificationHistory）作为drawerLabel的默认值，只要我们显式设置drawerLabel，就能覆盖这个默认行为啦～

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