React-navigation默认抽屉图标，如何更改？

Question

如何更改下图中的图标点？我无法在文档中找到文档，我想将其更改为不同的图标，但我不知道如何执行此操作。

我找到了有关 drawerIcon 的文档，但据我所知并设法实现该图标是针对抽屉中的菜单项的，而不是针对屏幕标题的。

这是我的代码：

const Drawer = createDrawerNavigator();

const headerOptions = {
  title: 'Task List',
  drawerIcon: ({ focused, size, color }) => <Ionicons name="ios-pizza" color="red" size={24} />,
};

const HomeScreen = ({ navigation }, props) => {
  return (
    <Drawer.Navigator screenOptions={{ drawerType: 'front' }}>
      <Drawer.Screen name="TaskList" component={TaskListScreen} options={headerOptions} />
      <Drawer.Screen name="TaskView" component={TaskViewScreen} />
      <Drawer.Screen name="Notifications" component={Notifications} />
      <Drawer.Screen name="Login" component={LoginScreen} />
    </Drawer.Navigator>
  );
};

但正如之前提到的，它呈现抽屉项目中的图标，如下所示

Answer 1

headerLeft

：返回一个 React 元素以显示在标题左侧的函数。您可以使用它来实现您的自定义左按钮，例如：

<Drawer.Navigator
  screenOptions={({ navigation }) => ({
    headerLeft: props => <IconComponent onPress={navigation.toggleDrawer} />,
  })}
>
  ...
</Drawer.Navigator>

Answer 2

您还可以使用图像作为抽屉图标。

screenOptions={({ navigation }) => ({
  headerLeft: () =>
     <Pressable onPress={navigation.toggleDrawer}>
       <Text>
          <Avatar.Image size={32} source={{ uri: deafaultImage }} />
       </Text>
      </Pressable >
     })}

Answer 3

<Drawer.Navigator
    screenOptions={{
        headerTintColor: 'red', // -----> by changing color from here
    }} drawerContent={props => <DrawerContent {...props} />} >
    <Drawer.Screen />
</Drawer.Navigator >

Answer 4

 <Drawer.Navigator
  screenOptions={({ navigation }) => ({
    headerLeft(props) {
      return (
        <Pressable {...props} >
          <Ionicons
            name='menu'
            size={30}
            color={COLOR_PRIMARY.light}
            onPress={() => {
              navigation.toggleDrawer();
            }}
          />
        </Pressable>
      );
    },
    drawerIcon: ({ color, focused, size }) => {
      return (
        <Ionicons name='restaurant-outline' size={size} color={color} />
      );
    },
    // ...
  })}
>...  </Drawer.Navigator>

我们如何将 Drawer Navigator 提供的默认样式应用到我们的自定义图标组件？