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

Question

我正在构建一个反应本机应用程序。我正在使用这个抽屉导航器（https://reactnavigation.org/docs/drawer-navigator/）组件。很清楚如何更改标题部分的文本，但不清楚如何更改标题图标的颜色。目前我的代码如下所示。

  <Drawer.Navigator
    initialRouteName="Calendar"
    screenOptions={{
      drawerStyle: {
        width: 240
      },
      headerTintColor: {color: KbStyles.white},
      headerStyle: {
        height: 80,
        backgroundColor: KbStyles.green
      },

      headerTitleStyle: {
        color: KbStyles.white
      },
      drawerActiveBackgroundColor : KbStyles.lightRed,
      drawerActiveTintColor: "white"
    }}

此代码成功更改了文本的颜色，但没有更改标题图标。它看起来像这样：

如何将该菜单图标的颜色更改为白色？

Answer 1

您必须使用这样的标题选项来更改标题标题或图标颜色

screenOptions={{
    headerTintColor: KbStyles.white,
    headerStyle: {
      backgroundColor: KbStyles.green
    }
}}

您也可以创建自己的左侧（按钮）组件：

headerLeft: (props) => {
   const {tintColor, pressColor, pressOpacity, labelVisible} = props;
   return <MyHeaderLeft {...props} />
}

或者，如果您想创建自己的自定义标题并希望将其与导航一起使用，请尝试以下操作 -

import { getHeaderTitle } from '@react-navigation/elements';

screenOptions={{
  headerStyle: {
    backgroundColor: KbStyles.green,
    //...other styles
  },
  header: ({ navigation, route, options }) => {
    const title = getHeaderTitle(options, route.name);
    return (
       <AppHeader //my custom header
         title={title}
         menu
         onPressMenu={() => navigation.toggleDrawer()}
         style={options.headerStyle}
       />
    );
  },
}}