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.

“Centrar el título del encabezado en la navegación de cajón”

03 Jun, 2023 Programación

Estoy tratando de centrar el título con Navigation Drawer. Su comportamiento predeterminado en iOS es centrado, pero en Android se mueve hacia el lado izquierdo solo con el cajón. ¿Cómo hacer para que esté en el centro de la barra de navegación?

He intentado diferentes opciones proporcionadas en la documentación, pero nada ayudó. Esto da una apariencia casi centrada en iOS y Android, pero no es a prueba de fallos.

const DrawerNavigator = () => {
const screenOptionsProps = {
screenOptions: {
headerTitle: () => {
return (

Title

);
},
},
}
};
return (
<drawer.navigator {…screenoptionsprops}=”” drawercontent=”{props” ==””> }>
<drawer.screen name=”Screen1″ component=”{Screen1}”></drawer.screen>
</drawer.navigator>
);
};

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para centrar el título con la navegación Drawer en iOS y Android, puedes utilizar el siguiente fragmento de código:

    const DrawerNavigator = () => {
  const screenOptionsProps = {
    screenOptions: {
      headerTitleAlign: 'center', // centrar el título
      headerTitleStyle: {
        alignSelf: 'center', // alinear el título en el centro del header
      },
    },
  };
  return (
    <drawer.navigator {...screenoptionsprops}="" drawercontent="{props" ==""> <customdrawercontent {...props}=""></customdrawercontent>}>
      <drawer.screen name="Screen1" component="{Screen1}"></drawer.screen>
    </drawer.navigator>
  );
};

    Este código centrará el título de la cabecera tanto en iOS como en Android, independientemente del tamaño de la pantalla. La propiedad headerTitleAligncentra el título horizontalmente y la propiedad headerTitleStyle alinea el título verticalmente en el centro de la cabecera.

Comments are closed.