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

【问题标题】：How to add header left on Tab.Screen using "@react-navigation/bottom-tabs"如何使用“@react-navigation/bottom-tabs”在 Tab.Screen 上添加标题
【发布时间】：2021-12-31 10:36:34
【问题描述】：

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

我还可以在标题左侧添加图像吗？

这是我的代码：

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;

【问题讨论】：

标签： javascript react-native tabs react-navigation-bottom-tab

【解决方案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

【讨论】：