React Native Drawer Navigator图标位置调整、缩放与隐藏问题求助

方案一：隐藏默认图标，保留自定义图标 #

如果想继续使用自己的自定义图标，只需移除Drawer.Navigator自带的默认抽屉图标即可。在Drawer.Navigator的screenOptions中配置headerLeft为null，就能清除默认图标：

import { DrawerActions } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function MyDrawer() {
  const navigation = useNavigation();
  return (
    <Drawer.Navigator
      screenOptions={{
        // 隐藏默认抽屉图标
        headerLeft: null,
        // 其他导航配置
      }}
    >
      <Drawer.Screen
        name="Home"
        component={HomeScreen}
        options={{
          // 保留你的自定义图标及触发逻辑
          headerRight: () => (
            <TouchableOpacity
              onPress={() => navigation.dispatch(DrawerActions.openDrawer())}
              style={{ marginRight: 16 }}
            >
              {/* 你的自定义图标组件 */}
              <Ionicons name="menu" size={24} color="black" />
            </TouchableOpacity>
          ),
        }}
      />
    </Drawer.Navigator>
  );
}

如果你的自定义图标在导航栏左侧，直接将headerLeft替换为你的自定义组件即可，无需设为null：

screenOptions={{
  headerLeft: () => (
    <TouchableOpacity
      onPress={() => navigation.dispatch(DrawerActions.openDrawer())}
      style={{ marginLeft: 16 }}
    >
      <Ionicons name="custom-menu" size={28} color="#333" />
    </TouchableOpacity>
  ),
}}

方案二：替换默认图标并调整大小/位置 #

如果想直接替换默认图标并自定义样式，可通过screenOptions重写导航栏左侧的切换按钮，自由控制图标大小和位置：

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator
      screenOptions={({ navigation }) => ({
        headerLeft: () => (
          <TouchableOpacity
            onPress={() => navigation.toggleDrawer()}
            // 调整图标位置的样式
            style={{ paddingLeft: 12 }}
          >
            {/* 自定义图标，设置大小 */}
            <FontAwesome name="bars" size={26} color="#666" />
          </TouchableOpacity>
        ),
      })}
    >
      {/* 你的屏幕组件 */}
      <Drawer.Screen name="Home" component={HomeScreen} />
    </Drawer.Navigator>
  );
}

也可以用官方的DrawerToggleButton组件自定义图标：

import { DrawerToggleButton } from '@react-navigation/drawer';

<Drawer.Navigator
  screenOptions={{
    headerLeft: (props) => (
      <DrawerToggleButton
        {...props}
        icon={() => (
          <Ionicons name="custom-menu" size={28} color="#333" style={{ marginLeft: 8 }} />
        )}
      />
    ),
  }}
>
  {/* 屏幕组件 */}
</Drawer.Navigator>

内容的提问来源于stack exchange，提问作者JonD