React Native Drawer Navigator v6如何调整菜单项及图标标签间距

你可以通过在Drawer.Navigator的screenOptions中配置官方提供的样式属性实现紧凑效果，不需要给DrawerItemList加无效的style属性，该组件本身不接收style参数。 #

调整菜单项之间的上下间距 #

通过drawerItemStyle属性控制单个菜单项的内外边距，默认配置下每个菜单项自带8px的垂直外边距和8px的垂直内边距，改小这两个值即可压缩菜单项间距：

screenOptions={{
  // 保留你原有的其他header、手势配置
  drawerItemStyle: {
    marginVertical: 2, // 菜单项之间的外间距，数值越小间距越小
    paddingVertical: 4, // 菜单项自身的上下内边距，控制内容区域的高度
  }
}}

如果需要单独调整某一个菜单项的间距，可以在对应Drawer.Screen的options中单独配置drawerItemStyle，优先级高于全局配置。 #

调整图标与标签文本的间距 #

通过drawerIconContainerStyle控制图标容器的右边距，默认值为16px，改小即可缩小图标和文字的距离，也可以配合drawerLabelStyle微调文字样式：

screenOptions={{
  // 接上其他配置
  drawerIconContainerStyle: {
    marginRight: 10, // 图标和文字的间距，按视觉效果调整数值即可
  },
  drawerLabelStyle: {
    fontSize: 15, // 可根据设计匹配文字大小
    marginLeft: 0, // 清除标签默认的左侧多余边距
  }
}}

完整修改后的代码示例 #

自定义抽屉组件 #

移除DrawerItemList上无效的style属性即可：

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView
      {...props}
      contentContainerStyle={{ paddingTop: 0 }}
    >
      <View style={styles.logo}>
        <Image source={require("../assets/images/logo.png")} />
      </View>
      <DrawerItemList {...props} />
    </DrawerContentScrollView>
  );
}

抽屉导航配置 #

在原有配置基础上新增间距相关属性即可：

<Drawer.Navigator
  drawerContent={(props) => <CustomDrawerContent {...props} />}
  screenOptions={{
    gestureEnabled: true,
    headerTitleAlign: "center",
    headerStyle: {
      backgroundColor: "#82bf4e",
      borderBottomWidth: 0.5,
      shadowColor: "transparent",
      borderBottomColor: "#75ad46",
    },
    headerTitleStyle: {
      fontSize: 18,
    },
    headerTintColor: "#fff",
    headerLeft: () => <BackButton />,
    // 新增紧凑布局配置
    drawerItemStyle: {
      marginVertical: 2,
      paddingVertical: 4,
      borderRadius: 6 // 可匹配参考图的菜单项圆角效果
    },
    drawerIconContainerStyle: {
      marginRight: 10,
    },
    drawerLabelStyle: {
      fontSize: 15,
    }
  }}
>
  <Drawer.Screen
    name="Home"
    component={HomeScreen}
    options={{
      header: () => <HeaderContainer />,
      drawerItemStyle: { display: "none" },
    }}
  />
  <Drawer.Screen
    name="Mein Team"
    component={TeamScreen}
    options={{
      headerTitle: "Mein Team",
      drawerIcon: () => <AntDesign size={20} name="team" />,
    }}
  />
  {/* 其余抽屉页面配置保持不变 */}
</Drawer.Navigator>

你可以根据实际视觉效果微调上述的间距数值，直到匹配你需要的紧凑度。 #

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