React Native：去除Drawer.Screen中drawerIcon与文本的间距

你需要调整Drawer Screen里drawerIcon和文本之间的间距，当前效果如图：

你的代码如下：

<Drawer.Navigator screenOptions={(navigation) => ({
        drawerItemStyle: {
           borderRadius: 0,
           width: '100%',
           marginLeft: 0
        }
      })}>
      <Drawer.Screen 
         name="HomeScreen" 
         component={HomeScreen} 
         options={{ 
            headerShown: true,  
            headerTransparent: true, 
            headerTitle: "", 
            title: 'Start Delivery',
            drawerIcon: (({focused}) => <Icon name="car" size={25} color={focused ? "#288df9" : "#777"} style={{padding:0, margin:0}} />)
         }} 
      />
</Drawer.Navigator>

以下是几种可行的解决方法：

方法1：通过drawerItemStyle调整整体内边距 #

React Navigation的抽屉项默认带有水平内边距，你可以直接在drawerItemStyle中修改paddingHorizontal或单独设置paddingRight，快速缩小图标与文本的间距：

<Drawer.Navigator screenOptions={() => ({
  drawerItemStyle: {
    borderRadius: 0,
    width: '100%',
    marginLeft: 0,
    // 调整整体水平内边距，数值按需修改
    paddingHorizontal: 10,
    // 也可单独控制右侧内边距：paddingRight: 6
  }
})}>
  {/* 你的Screen代码 */}
</Drawer.Navigator>

方法2：给drawerIcon添加精准间距 #

如果需要更细致的控制，直接给drawerIcon组件添加marginRight（或paddingRight），直接控制图标与文本的距离：

drawerIcon: (({focused}) => <Icon 
  name="car" 
  size={25} 
  color={focused ? "#288df9" : "#777"} 
  style={{marginRight: 8}} // 修改此数值调整间距
/>)

方法3：自定义DrawerContent（高度灵活方案） #

如果默认样式无法满足需求，完全自定义抽屉内容，精准控制每一部分布局：

import { DrawerContentScrollView, DrawerItem } from '@react-navigation/drawer';

const CustomDrawerContent = (props) => {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItem
        label="Start Delivery"
        onPress={() => props.navigation.navigate('HomeScreen')}
        icon={({focused}) => <Icon 
          name="car" 
          size={25} 
          color={focused ? "#288df9" : "#777"} 
        />}
        // 通过flex布局的gap控制图标与文本间距
        style={{flexDirection: 'row', alignItems: 'center', gap: 5}}
        // 去掉标签默认的左侧margin
        labelStyle={{marginLeft: 0}}
      />
      {/* 其他抽屉项 */}
    </DrawerContentScrollView>
  );
};

// 使用自定义抽屉内容
<Drawer.Navigator drawerContent={(props) => <CustomDrawerContent {...props} />}>
  <Drawer.Screen 
    name="HomeScreen" 
    component={HomeScreen} 
    options={{ 
      headerShown: true,  
      headerTransparent: true, 
      headerTitle: "", 
      title: 'Start Delivery'
    }} 
  />
</Drawer.Navigator>

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