如何使用“@react-navigation/bottom-tabs”在 Tab.Screen 左侧添加 header

Question

I'm using @react-navigation/bottom-tabs Package but I don't understand how to add header left on Tab.Screen tag?

And also can I add image on header left?

Here is my code:

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";

const Tab = createBottomTabNavigator();

const Tabs =()=>{
  return(
    <Tab.Navigator tabBarPosition="bottom" screenOptions={{
      tabBarStyle: {
        backgroundColor: Colors.dark,
      },
    }}>
      <Tab.Screen name="Home" component={Home} options={{headerTitle:"Explore",headerTintColor:Colors.white,headerStyle:{backgroundColor:Colors.dark}}}/>
      <Tab.Screen name="Category" component={Category} options={{headerTitle:"",headerTintColor:Colors.white,headerStyle:{backgroundColor:Colors.dark},headerLeft:{}}}/>
      <Tab.Screen name="Search" component={Search} options={{headerTitle:"Explore",headerTintColor:Colors.white,headerStyle:{backgroundColor:Colors.dark}}}/>
      <Tab.Screen name="Profile" component={Profile} options={{headerTitle:"Explore",headerTintColor:Colors.white,headerStyle:{backgroundColor:Colors.dark}}}/>
    </Tab.Navigator>
  )
}
export default Tabs;

Answer 1

Use this,

Here is the code where you can add the headerLeft on Tabs.Screen tag.

<Tabs.Screen
    name="Home"
    component={HomeScreen}
    options={{
      headerTitle: props => <LogoTitle {...props} />,
      headerLeft: () => (
        <Button
          onPress={() => alert('This is a button!')}
          title="Info"
          color="#fff"
        />
      ),
    }}
  />

and also you can add image or Button under the headerLeft Tag, for more details follow this link