react-native - 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: Function which returns a React Element to display on the left side of the header. You can use it to implement your custom left button, for example:

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