Encabezado para DrawerNavigation con react-navigation

No olvides que en las ciencias informáticas un error puede tener varias resoluciones, de igual modo aquí te compartiremos la mejor y más eficiente.

Solución:

Puede implementar un componente de contenido personalizado para el cajón. Allí también puede simplemente renderizar elementos de navegación usando DrawerItems. Por ejemplo:

import React from 'react'
import  Text, View  from 'react-native'
import  DrawerItems, DrawerNavigation  from 'react-navigation'

const DrawerContent = (props) => (
  
    
      
        Header
      
    
    
  
)

const Navigation = DrawerNavigator(
  // ... your screens
, 
  // define customComponent here
  contentComponent: DrawerContent,
)

Para la navegación por cajones, puede agregar su propio encabezado y pie de página y crear sus propios estilos con contentComponent Configuración:
Primero import DrawerItems, DrawerNavigation from 'react-navigation' Entonces

Encabezado antes DrawerItems:

contentComponent: props => Your Own Header Area Before .

Pie de página después DrawerItems:

contentComponent: props => Your Own Footer Area After .

Puedes lograrlo usando contentComponent opción en la configuración de navegación del cajón. Dos formas de hacerlo según el nivel de configuración requerido:

Método 1.

CajónArtículos desde react-navigation (maneja la navegación por sí solo) –

import DrawerItems, DrawerNavigation from 'react-navigation';
export default DrawerNavigator(
// ... your screens
, 
// define customComponent here
contentComponent: (props) =>

Header




);

Esto crea un encabezado fijo con vista de desplazamiento para los elementos del menú debajo de él.

Método 2.

Creación de su propio componente personalizado –

import  DrawerNavigation  from 'react-navigation'
export default DrawerNavigator(
// ... your screens
, 
// define customComponent here
contentComponent: props => 
);

Aquí SideMenu es su propio componente para mostrar en el cajón. Puedes usar reaccionar-navegación NavigationActions.navigate(pantalla) para manejar el enrutamiento en onPress de los elementos del menú.

Para una explicación más detallada sobre el segundo método https://medium.com/@kakul.gupta009/custom-drawer-using-react-navigation-80abbab489f7

---

---

Utiliza Nuestro Buscador