反应本机选项卡导航标题未显示页面特定级别

Question

我已经实现了 tab navigation 和 drawer navigation，但我面临的问题是标签栏页面的标题级别没有按照标签导航中的定义显示。标签栏页面将主页显示为标题栏级别，我附上了商店页面的屏幕截图，它应该将商店显示为标题级别，但显示主页。

<块引用>

App.js

// Packages
import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import {StyleSheet, StatusBar} from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';

// App settings
import Colors from './src/settings/Colors';

// Navigation Panels
import RootStackScreen from './src/navigation/RootStackScreen';
import { DrawerContent } from './src/navigation/DrawerContent';
import { TabContent } from './src/navigation/TabContent';

// Screens
import Feedback from './src/screens/Feedback';

const Drawer = createDrawerNavigator();

const App = () => {
    const loginState = 1;
    
return (
    <NavigationContainer>
        <StatusBar barStyle="dark-content" backgroundColor={Colors.primary} />
        {
            loginState != null ? (
                <Drawer.Navigator drawerContent={props => <DrawerContent {...props} />} screenOptions={{
                    headerShown: true,
                    headerTitleAlign: 'center',
                    headerStyle: styles.headerBackgroundColor,
                    headerTitleStyle: styles.headerTitleStyle,
                    headerTintColor: Colors.headerFontColor
                }}>
                    <Drawer.Screen name="Home" component={TabContent} />
                    <Drawer.Screen name="Feedback" component={Feedback} options={{ title: 'Feedback' }} />
                </Drawer.Navigator>
            ) : <RootStackScreen/>
        }
        
    </NavigationContainer>
);
};

export default App;

<块引用>

TabContent.js

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/FontAwesome';
import Colors from '../settings/Colors';

import Home from '../screens/Home';
import Shop from '../screens/Shop';
import Profile from '../screens/Profile';

const Tab = createBottomTabNavigator();

export function TabContent() {
    return (
        <Tab.Navigator 
            initialRouteName="Home"
            backBehavior="initialRoute"
            screenOptions={({ route }) => ({
                tabBarIcon: ({ focused, color, size }) => {
                let iconName;
                size = 23;
    
                if (route.name == 'Home') {
                    iconName = 'home';
                } else if (route.name == 'Meals') {
                    iconName = 'spoon';
                } else if (route.name == 'Workout') {
                    iconName = 'heartbeat';
                } else if (route.name == 'Shop') {
                    iconName = 'shopping-bag';
                } else if (route.name == 'Profile') {
                    iconName = 'user';
                }

                return <Icon name={iconName} size={size} color={color} />;
                },
            })}
            tabBarOptions={{
                activeTintColor: Colors.dark,
                // inactiveTintColor: Colors.light,
                style: {
                    backgroundColor: Colors.primary
                }
            }}
        >
            <Tab.Screen name="Home" component={Home} />
            <Tab.Screen name="Shop" component={Shop} />
            <Tab.Screen name="Profile" component={Profile} />
        </Tab.Navigator>
    );
}