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

Question

我正在使用 @react-navigation/bottom-tabs 包，但我不明白如何添加 header 留在 Tab.Screen 标签上？

我还可以在 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 标签下添加图片或按钮，更多详情请关注link

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

How to add header left on Tab.Screen using "@react-navigation/bottom-tabs"

javascript

react-native

tabs

react-navigation-bottom-tab