React Navigation Drawer图标标签间距调整及底部菜单设置求助

Hey there! Let's sort out those two Drawer issues you're facing—getting the icon and label closer together, and moving your Settings/Logout items to the bottom. I’ve dealt with these exact problems before, so here’s a step-by-step fix:

The reason your margin/padding tweaks on labelStyle or drawerIcon weren’t working is because the default DrawerItems component wraps the icon and label in a container with fixed, unconfigurable spacing. Instead of fighting that, let’s build custom drawer items so you have full control over the layout.

Here’s how to modify your CustomDrawerComponent:

const CustomDrawerComponent = (props) => {
  // Split items into regular navigation items and bottom items (Settings/Logout)
  const regularItems = props.items.filter(item => 
    item.routeName !== 'Settings' && item.routeName !== 'Logout'
  );
  const bottomItems = props.items.filter(item => 
    item.routeName === 'Settings' || item.routeName === 'Logout'
  );

  return (
    <SafeAreaView style={{ flex: 1 }}>
      {/* Your existing profile header section */}
      <View style={{ 
        flexDirection: 'row', 
        height:150, 
        backgroundColor: Colors.white, 
        alignItems:'center', 
        marginLeft: 15,
      }}> 
        <Image source={Images.trump} style={{height:80, width:80, borderRadius:40}} /> 
        <View> 
          <Text style={{marginLeft: 10,marginBottom: 5, fontSize: 16, fontFamily: 'CoreSansD55Bold', color: Colors.gray,}}> Donald </Text> 
          <Text style={{marginLeft: 12, fontSize: 9, color: Colors.heavyGray, fontFamily: 'CoreSansD35Regular', }}> Graphic Designer </Text> 
        </View> 
      </View>

      {/* Scrollable regular navigation items */}
      <ScrollView>
        {regularItems.map((item, index) => (
          <TouchableOpacity
            key={index}
            style={{ 
              flexDirection: 'row', 
              alignItems: 'center', 
              paddingVertical: 12, 
              paddingHorizontal: 15,
              backgroundColor: props.activeItemKey === item.key ? Colors.white : 'transparent'
            }}
            onPress={() => props.navigation.navigate(item.routeName)}
          >
            {/* Render the item's icon */}
            {item.drawerIcon && item.drawerIcon({ tintColor: Colors.heavyGray })}
            {/* Set marginLeft:7 to create the exact gap between icon and label */}
            <Text style={{ 
              marginLeft: 7, 
              color: Colors.heavyGray, 
              fontFamily: 'CoreSansD35Regular', 
              fontSize: 15 
            }}>
              {item.drawerLabel}
            </Text>
          </TouchableOpacity>
        ))}
      </ScrollView>

      {/* Bottom items (Settings & Logout) */}
      <View style={{ paddingHorizontal: 15, paddingBottom: 20 }}>
        {bottomItems.map((item, index) => (
          <TouchableOpacity
            key={index}
            style={{ 
              flexDirection: 'row', 
              alignItems: 'center', 
              paddingVertical: 12,
            }}
            onPress={() => props.navigation.navigate(item.routeName)}
          >
            {item.drawerIcon && item.drawerIcon({ tintColor: Colors.heavyGray })}
            <Text style={{ 
              marginLeft: 7, 
              color: Colors.heavyGray, 
              fontFamily: 'CoreSansD35Regular', 
              fontSize: 15 
            }}>
              {item.drawerLabel}
            </Text>
          </TouchableOpacity>
        ))}
      </View>
    </SafeAreaView>
  );
};

Key changes here: #

• We dumped the default DrawerItems component and built custom touchable items by looping through props.items. This lets us directly set marginLeft:7 on the label text to control the icon-label gap exactly.
• We split items into two groups to handle their placement separately.

The magic here is using flexbox in the parent SafeAreaView:

• By setting flex:1 on the SafeAreaView, the ScrollView will automatically expand to fill all available space above the bottom items.
• The bottom items container gets pushed to the very bottom of the drawer because there’s no remaining space left for it above.

Optional extra: Add a divider #

If you want to visually separate the main items from the bottom ones, add this line right above the bottom items View:

<View style={{ height: 1, backgroundColor: '#e0e0e0', marginHorizontal: 15, marginBottom: 10 }} />

That should fix both issues! Just make sure your Settings and Logout routes are properly added to your drawer navigator’s route list, same as JobFeed. Let me know if you hit any roadblocks with the code.

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