如何编辑 -add 字符串和图标之间的边距？ 反应原生 - 抽屉

Question

Im building a sidebar menu, and im using react-navigation-drawer , heres the code:

    const drawer = createDrawerNavigator({ //hooks
            Home: { screen: Home_Stack, navigationOptions: {drawerIcon: <Entypo name = "home" size = {24} color = {"black"}></Entypo>}},
            About: { screen: Slide_menu_stack}
    });

    export default createAppContainer(drawer);

and it looks like this:

I want home to be more closer to the icon, how can I do that?

Answer 1

you can create a custom drawer component like think

import { NavigationContainer } from '@react-navigation/native';
import {createDrawerNavigator,} from '@react-navigation/drawer'; 
const Drawer = createDrawerNavigator();

export function MyDrawer() {
 return (
<NavigationContainer>
<Drawer.Navigator drawerContent={props => <CustomDrawerContent {...props} />}>

  <Drawer.Screen name="Home" component={Home_Stack} />
  <Drawer.Screen name="About" component={Slide_menu_stack} />

</Drawer.Navigator>
</NavigationContainer>
);
}

and coustomdrawer like this which I created

function CustomDrawerContent(props) {

  return (
    <View style={styles.container}>
      <ScrollView>
        {here you can style your drawer as you want}
      </ScrollView>
    </View>
  )
}