React Native：为DrawerNavigator内自定义侧边栏设置选中菜单激活颜色

嗨，我来帮你搞定这个事儿～ 当你用contentComponent自定义侧边栏的时候，contentOptions里的activeTintColor和activeBackgroundColor是不会自动生效的，因为这些配置是给React Navigation默认的侧边栏组件设计的，自定义组件得自己处理选中状态的样式逻辑。

下面是具体的解决步骤和代码示例：

核心思路 #

自定义SideDrawer组件需要从navigation props里拿到当前活跃的路由信息，然后给匹配的菜单项添加选中样式。

完整的SideDrawer实现代码 #

import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

const SideDrawer = ({ navigation }) => {
  // 获取当前处于活跃状态的路由名称
  const activeRouteName = navigation.state.routes[navigation.state.index].routeName;

  // 这里的菜单项要和你DrawerNavigator里配置的screen名称对应
  const menuItems = [
    { routeName: 'ProfileScreen', displayTitle: '个人资料' },
    { routeName: 'Home', displayTitle: '首页' },
  ];

  return (
    <View style={styles.drawerContainer}>
      {menuItems.map(item => {
        const isActive = item.routeName === activeRouteName;
        return (
          <TouchableOpacity
            key={item.routeName}
            onPress={() => navigation.navigate(item.routeName)}
            // 动态拼接基础样式和选中样式
            style={[styles.menuItem, isActive && styles.activeMenuItem]}
          >
            <Text style={[styles.menuText, isActive && styles.activeMenuText]}>
              {item.displayTitle}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
};

const styles = StyleSheet.create({
  drawerContainer: {
    flex: 1,
    paddingTop: 50,
    backgroundColor: '#ffffff',
  },
  menuItem: {
    paddingVertical: 14,
    paddingHorizontal: 20,
  },
  // 选中时的背景色，对应你原来的activeBackgroundColor
  activeMenuItem: {
    backgroundColor: 'purple',
  },
  menuText: {
    fontSize: 16,
    color: '#333333',
  },
  // 选中时的文字颜色，对应你原来的activeTintColor
  activeMenuText: {
    color: '#e91e63',
  },
});

export default SideDrawer;

关键细节说明 #

1. 获取活跃路由：通过navigation.state.routes[navigation.state.index].routeName拿到当前正在显示的页面路由名称，用来判断菜单项是否被选中。
2. 动态样式切换：用isActive变量判断当前项是否匹配活跃路由，然后把基础样式和选中样式拼接起来。
3. 菜单项匹配：确保menuItems里的routeName和你DrawerNavigator中配置的screen名称完全一致，不然匹配不上哦。

如果你的菜单项想直接从DrawerNavigator的配置里动态获取（不用手动写menuItems），可以尝试用props.items或者props.routes（不同React Navigation版本可能有差异）来遍历，核心逻辑是一样的。

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