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

Question

我正在使用@react-navigation/bottom-tabs Package 但我不明白如何在 Tab.Screen 標簽上添加 header？

我還可以在 header 左邊添加圖像嗎？

這是我的代碼：

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

用這個，

這是您可以在 Tabs.Screen 標記上添加 headerLeft 的代碼。

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

您也可以在 headerLeft 標簽下添加圖像或按鈕，有關更多詳細信息，請點擊此鏈接