es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo eliminar el relleno o espacio de los elementos del cajón en React Native.

16 Jul, 2023 Programación

Quiero quitar los espacios izquierdo y derecho de los elementos del cajón de React Native… ¿cómo puedo hacerlo? He intentado los siguientes códigos, pero no funcionan:

<drawer.navigator initialroutename="{Dashboard}" screenoptions="{{" draweractivebackgroundcolor:="" 'orange',="" draweractivetintcolor:="" '#fff',="" drawerinactivetintcolor:="" '#000',="" headershown:="" false,="" scenecontainerstyle:="" {="" padding:="" 0,="" margin:="" 0,="" },="" drawerstyle:="" {="" padding:="" 0,="" margin:="" 0,="" },="" drawerlabelstyle:="" {="" fontsize:="" 15="" }="" }}="">
    <drawer.screen options="{{" margin:="" 0,="" width:="" '100%'="" }}="" name="Dashboard" component="{Dashboard}"></drawer.screen>

    <drawer.screen name="Mis Viajes" component="{Dashboard}"></drawer.screen>

    <drawer.screen name="Contactos de Emergencia" component="{Dashboard}"></drawer.screen>

    <drawer.screen name="Ubicaciones Guardadas" component="{Dashboard}"></drawer.screen>
</drawer.navigator>

Imagen

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para eliminar los espacios izquierdo y derecho de los elementos del cajón de React Native, puedes agregar la propiedad drawerContentContainerStyle al componente Drawer.Navigator y establecer su valor en {paddingHorizontal: 0}. Esto eliminará el relleno horizontal del contenido dentro del cajón. Tu código actualizado debería verse así:

    <drawer.navigator initialroutename="{Dashboard}" screenoptions="{{" draweractivebackgroundcolor:="" 'orange',="" draweractivetintcolor:="" '#fff',="" drawerinactivetintcolor:="" '#000',="" headershown:="" false,="" scenecontainerstyle:="" {="" padding:="" 0,="" margin:="" 0,="" },="" drawerstyle:="" {="" padding:="" 0,="" margin:="" 0,="" },="" drawerlabelstyle:="" {="" fontsize:="" 15,="" },="" agrega="" esta="" línea="" para="" eliminar="" el="" relleno="" horizontal="" drawercontentcontainerstyle:="" {="" paddinghorizontal:="" 0="" },="" }}="">
  <drawer.screen options="{{" margin:="" 0,="" width:="" '100%',="" }}="" name="Dashboard" component="{Dashboard}"></drawer.screen>

  <drawer.screen name="My Trips" component="{Dashboard}"></drawer.screen>

  <drawer.screen name="Emergency Contacts" component="{Dashboard}"></drawer.screen>

  <drawer.screen name="Saved Locations" component="{Dashboard}"></drawer.screen>
</drawer.navigator>

Comments are closed.