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

【问题标题】：React-navigation default drawer icon, how to change it?React-navigation 默认抽屉图标，如何更改？
【发布时间】：2022-08-09 12:23:16
【问题描述】：

如何更改下图中的图标点？我无法在文档中找到文档，我想将其更改为不同的图标，但我不知道该怎么做。

我找到了有关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>
  );
};

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

标签： react-native react-navigation

【解决方案1】：

headerLeft：返回一个 React 元素以显示在标题左侧的函数。您可以使用它来实现您的自定义左按钮，例如：
<Drawer.Navigator
  screenOptions={({ navigation }) => ({
    headerLeft: props => <IconComponent onPress={navigation.toggleDrawer} />,
  })}
>
  ...
</Drawer.Navigator>

【讨论】：

如果这对您有用，请删除 (Untested) 标志
我在他们的文档中的示例代码中发现了headerLeft，这种方法的问题是我必须对每个抽屉导航器项目做同样的事情，我想知道是否有一个全局解决方案？
我在上面的答案中包含的代码是一个全局解决方案
你是对的，我将选项应用于屏幕而不是导航，我的错，谢谢
如果上面的代码工作正常，请删除 untested 标志（或告诉我删除它）。此外，您可以单击复选标记 (✓) 接受它。这样其他人就知道你已经（充分地）得到了帮助。

【解决方案2】：

你也可以使用图片作为抽屉图标。

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

【讨论】：