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

Question

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

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

这是我的代码：

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>