reaccionar a la navegación; usar imagen en el encabezado?

Buscamos en el mundo on line y así de este modo darte la solución para tu dilema, si continúas con alguna duda puedes dejar la pregunta y respondemos sin falta.

Solución:

Actualizar:

Desde v2 de la biblioteca, hay una opción especial para configurar el fondo del encabezado, a saber headerBackground.

Esta opción acepta un componente React, por lo que cuando se establece en un Image componente, lo usará.

Por ejemplo:

export default createStackNavigator(
  Home: 
    screen: HomeScreen
  ,
, 
  navigationOptions: 
    headerBackground: (
      
    ),
  
);

Ejemplo de trabajo: https://snack.expo.io/@koen/react-navigation-header-background

---

Respuesta anterior, para cuando todavía se usa React Navigation v1:

Crear un encabezado personalizado con una imagen es realmente muy simple.

Al envolver el encabezado con una vista y colocar una imagen de posición absoluta en esa vista, la imagen se escalará a su tamaño principal.

Importante es establecer el backgroundColor del encabezado predeterminado a transparent.

const ImageHeader = props => (
  
    
    

  
);

Y luego use ese componente como encabezado:

const SimpleStack = StackNavigator(
  Home: 
    screen: MyHomeScreen,
  ,
, 
  navigationOptions: 
    headerTitleStyle:  color: '#fff' ,
    header: (props) => ,
  
);

Lo que resultaría en:

Según los documentos oficiales de react-navigation v5, se puede implementar de la siguiente manera:

https://reactnavigation.org/docs/headers/#replaceing-the-title-with-a-custom-component

   ( // App Logo
      
    ),
    headerTitleStyle:  flex: 1, textAlign: 'center' ,
    
  />

¡Actualización para React Navigation v5! (haciendo esta publicación para futuras referencias)

Para reaccionar navegación 5, encontré esta solución.

En la clase StackNavigator.js puede establecer una imagen diferente para cada página (Stack.Screen):

 
    }
 />

Luego, debe ajustar el ancho, la altura y la posición de la imagen, ¡pero funciona! Creo que es la forma más sencilla. Aquí está la salida (sí, es mi imagen, antes de los ajustes).

¡No olvide importar la imagen!

import  Image  from 'react-native'

Reseñas y valoraciones del post

Acuérdate de que tienes permiso de glosar si te fue preciso.

---

---

Utiliza Nuestro Buscador