反应原生 - 删除抽屉图标和 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

使用

DrawerItemList

，它是 DrawerItems 的列表。查看源代码，包裹标签的视图实现了

marginLeft

的

32

。这是硬编码的，如果不使用肮脏的技巧就无法更改。

让我们使用以下示例来测试一下。

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>
  );
}

上面使用

View

作为具有红色背景的虚拟图像。这是结果。

在我们的图标中添加

marginRight

的

-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

组件，而是使用具有自定义样式的自定义组件。

Answer 2

也解决该问题的另一个选项是直接在每个列表项内呈现的文本中使用负数

marginLeft

。您可以使用 option prop 内的

drawerLabelStyle

属性来达到此解决方案，如下所示：

function App() {
  return (
     <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={Home} options={{ drawerLabelSyle: { marginLeft: -10 } }}  />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

Answer 3

另一个答案是直接在抽屉导航屏幕选项中使用 MarginRight，这样它将应用于所有抽屉图标边距。

<Drawer.Navigator
  drawerContent={props => <Sidemenu {...props} />}
  screenOptions={{        
    drawerIcon: () => (
      <Image
        source={{
          uri: 'https://img.icons8.com/?size=48&id=XnHBz2LnhELw&format=png',
        }}
        style={{ height: 35, width: 35 , marginRight:-20}}
      />
    )> 
</Drawer.Navigator>