如何修改React Native中Drawer.Navigator的菜单图标颜色？

你代码不生效的核心原因是headerTintColor属性赋值错误，该属性直接接收颜色值即可，不需要嵌套color对象，它本身就会同时作用于头部的菜单图标、返回按钮等交互元素，也会默认作用于标题文字。

修改后的代码如下：

<Drawer.Navigator
  initialRouteName="Calendar"
  screenOptions={{
    drawerStyle: {
      width: 240
    },
    // 修正赋值格式，直接传入颜色值
    headerTintColor: KbStyles.white,
    headerStyle: {
      height: 80,
      backgroundColor: KbStyles.green
    },
    // 不需要单独调整标题颜色的话，headerTitleStyle可以省略，headerTintColor已经会控制标题颜色
    headerTitleStyle: {
      color: KbStyles.white
    },
    drawerActiveBackgroundColor : KbStyles.lightRed,
    drawerActiveTintColor: "white"
  }}
>

如果需要完全自定义头部菜单图标，也可以手动配置headerLeft属性渲染自定义按钮，示例：

// 引入你项目中使用的图标组件，以下为示例
import Ionicons from '@expo/vector-icons/Ionicons';

// screenOptions配置
screenOptions={({navigation}) => ({
  // 保留其他原有配置
  headerLeft: () => (
    <Ionicons 
      name="menu" 
      size={24} 
      color={KbStyles.white} 
      style={{marginLeft: 16}}
      onPress={() => navigation.toggleDrawer()}
    />
  )
})}

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