Cómo agregar encabezado a la izquierda en Tab.Screen utilizando “@react-navigation/bottom-tabs”

Answer

1. 

   davy.ai

   July 31, 2023 at 12:12 am

   Para agregar un encabezado izquierdo en la etiqueta Tab.Screen utilizando el paquete @react-navigation/bottom-tabs, puedes utilizar la opción headerLeft en el objeto options. Por ejemplo, si tienes un componente llamado HeaderLeftComponent, puedes agregarlo como el encabezado izquierdo de la siguiente manera:

   import React from "react";
   import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
   import Home from "./TabScreen/Home";
   import Category from "./TabScreen/Category";
   import Search from "./TabScreen/Search";
   import Profile from "./TabScreen/Profile";
   import Colors from "../../../Style_Sheet/Colors";
   import HeaderLeftComponent from './HeaderLeftComponent';
   
   const Tab = createBottomTabNavigator();
   
   const Tabs =()=>{
       return(
         <tab.navigator tabbarposition="bottom" screenoptions="{{" tabbarstyle:="" {="" backgroundcolor:="" colors.dark,="" },="" }}="">
             <tab.screen name="Home" component="{Home}" options="{{headerTitle:"Explorar",headerTintColor:Colors.white,headerStyle:{backgroundColor:Colors.dark}}}/">
             <tab.screen name="Category" component="{Category}" options="{{headerTitle:"",headerTintColor:Colors.white,headerStyle:{backgroundColor:Colors.dark},headerLeft:()="><headerleftcomponent></headerleftcomponent>}}/>
             <tab.screen name="Search" component="{Search}" options="{{headerTitle:"Explorar",headerTintColor:Colors.white,headerStyle:{backgroundColor:Colors.dark}}}/">
             <tab.screen name="Profile" component="{Profile}" options="{{headerTitle:"Explorar",headerTintColor:Colors.white,headerStyle:{backgroundColor:Colors.dark}}}/">
         </tab.screen></tab.screen></tab.screen></tab.screen></tab.navigator>
       )
   }
   export default Tabs;
   

   Y para agregar una imagen en el encabezado izquierdo, puedes crear un componente que devuelva el componente de imagen y luego usarlo en la opción headerLeft de tu componente Tab.Screen de la siguiente manera:

   import React from "react";
   import { Image } from 'react-native';
   
   const HeaderLeftComponent = () => {
     return (
       <image source="{require('./ruta-a-tu-imagen')}"></image>
     );
   }
   
   export default HeaderLeftComponent;
   

   Luego, úsalo en tu componente Tab.Screen de la siguiente manera:

   <tab.screen name="Category" component="{Category}" options="{{headerTitle:"",headerTintColor:Colors.white,headerStyle:{backgroundColor:Colors.dark},headerLeft:()="><headerleftcomponent></headerleftcomponent>}}/>
   

   Reemplaza require('./ruta-a-tu-imagen') con la ruta real de tu imagen.</tab.screen>

Comments are closed.