Cómo pasar componente personalizado en título en la barra superior en la navegación nativa reactr (wix)

He creado una aplicación de chat en reactr nativo. Ahora quiero crear encabezado de aplicaciones similares a lo que se aplica con DP y texto en encabezado. Para ello necesito pasar componente personalizado en la barra superior como en la navegación nativa (wix), en la barra superior el título acepta sólo cadena. He pasado por varios enlaces pero no tengo éxito.

Cualquier ayuda es apreciada.

Imagen de referencia dada a continuación.

Whatsapp header image - with DP and text

Nota: Estoy usando la respuesta de navegación nativa (wix) versión 4.8.4

Gracias.

Pregunta hecha hace 3 años, 4 meses, 28 días - Por scriptsorcerer4f7e

3 Respuestas:

  • puede desactivar el encabezado en la navegación de react y crear un componente de encabezado personalizado y pasar como prop o niños, Al menos así lo hago.

    en el archivo de componentes, antes de exportar

    ComponentName.navigationOptions = {
    header: null,
  };

    y luego simplemente pasar cabecera

    Respondida el Dec 17, 2020 a las 21:54 - por compilerhero1251

    Votos positivos: 0 | Votos negativos: 0

  • Para lograr mostrar un componente personalizado en el título de la barra superior en la navegación nativa de React (Wix), puedes utilizar la opción de personalización que ofrece la librería de navegación. A continuación te muestro un ejemplo de cómo puedes lograrlo:

    • Define un componente personalizado que desees mostrar en el título de la barra superior, por ejemplo, un componente que contenga la imagen de perfil y el nombre del usuario.
    jsx
import React from 'react';
import { View, Text, Image } from 'react-native';

const CustomHeaderTitle = () => {
  return (
    
      
      Nombre Usuario
    
  );
};

export default CustomHeaderTitle;
    • En tu componente de navegación donde configuras la barra superior, puedes pasar este componente personalizado como el título de la barra superior.
    jsx
import { createStackNavigator } from '@react-navigation/stack';
import CustomHeaderTitle from './CustomHeaderTitle';

const Stack = createStackNavigator();

const AppNavigator = () => {
  return (
    
      
        }}
      />
    
  );
};

    De esta manera, al navegar a la pantalla "Chat", se mostrará el componente personalizado definido en CustomHeaderTitle como el título en la barra superior.

    Espero que esta solución te ayude a lograr lo que necesitas en tu aplicación de chat en React Native. ¡Déjame saber si tienes alguna otra pregunta o si necesitas más ayuda!

    Respondida el Dec 18, 2020 a las 21:54 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Solución:

    Para pasar un componente personalizado en el título de la barra superior en la navegación nativa reactiva (wix), puedes utilizar el siguiente método:

    jsx
import { StackActions } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import CustomHeader from './CustomHeader'; // Tu componente personalizado

const Stack = createStackNavigator();

const AppNavigator = () => {
  return (
    
       ,
        }}
      />
    
  );
};

    Explicación:

    Importa StackActions y createStackNavigator de @react-navigation/native. Crea una nueva instancia de Stack utilizando createStackNavigator(). Envuelve tu componente principal, AppNavigator, con la pila. Define una pantalla llamada "Inicio" con el componente HomeScreen. En las opciones de la pantalla "Inicio", establece headerTitle a una función que devuelva el componente CustomHeader.

    Componente CustomHeader:

    Tu componente CustomHeader debería verse más o menos así:

    jsx
import React from 'react';
import { View, Text, Image } from 'react-native';

const CustomHeader = () => {
  return (
    
      
      John Doe
    
  );
};

export default CustomHeader;

    Nota:

    Recuerda reemplazar require('../assets/profile-picture.png') con la fuente de la imagen de tu perfil. Ajusta los estilos según sea necesario.

    Resultado:*

    Este método te permitirá mostrar un componente personalizado, que incluye una imagen de perfil y un nombre de usuario, en el título de la barra superior de tu aplicación de navegación nativa reactiva (wix).

    Respondida el Dec 18, 2020 a las 22:02 - por Gemini

    Votos positivos: 0 | Votos negativos: 0