React Native - 删除抽屉图标和 Drawer.Screen 上的项目文本之间的空间

Question

我正在尝试调整抽屉屏幕中图标和文本之间的空间。

这是一个可以更好解释的图像。

这是我的代码

<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>

谢谢

Answer 1

默认Drawer使用一个DrawerItemsDrawerItemList列表。查看源代码，包装标签的视图实现了 a of 。这是硬编码的，如果不使用肮脏的技巧就无法更改。marginLeft32

让我们使用以下示例对此进行测试。

function App() {
  return (
     <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={Home} options={{drawerIcon: () => <View style={{height:20, width: 20, backgroundColor: "red"}} />}}  />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

上面使用 aView作为红色背景的虚拟图像。这是结果。

在我们的图标中添加一个“ marginRightof -32”可以完全消除“间隙”。

function App() {
  return (
     <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={Home} options={{drawerIcon: () => <View style={{height:20, width: 20, backgroundColor: "red", marginRight: -32}} />}}  />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

这是结果。

这并不理想，因为我们必须为每个图标执行此操作，因此我们可以创建一个自定义组件并重用它。

const CustomIconComponent = ({focused, name}) => {
    return <View style={{marginRight: -32}}>
        <Icon name={name} size={25} color={focused ? "#288df9" : "#777"} />
    </View>
}

然后，将其用于每个屏幕。

options={{ 
        
    ...
            title: 'Start Delivery',
            drawerIcon: (({focused}) => <CustomIconComponent focused={focused} />)
         }} 

还有第二种方法。我们可以创建一个自定义抽屉。这将允许我们不使用该DrawerItem组件，而是使用具有自定义样式的自定义组件。