Javascript 如何在TopTabNavigator上方放置标题组件？

我想在Header组件位于TopTabNavigator上方的位置执行此操作：

如果我没有两种类型的导航器（堆栈和选项卡），我可以这样做：（使用

并将标题放在里面，但这不是我的情况）

//只是一个例子
const Tab=createMaterialTopTabNavigator（）；
函数MyTabs（）{
返回(
您可以在堆栈导航器的
MainContent
屏幕的
options
prop内设置
header
，以呈现该屏幕的自定义标题

假设您只想在导航器中为顶部选项卡显示自定义标题，而不为其他屏幕显示标题，则可以执行以下操作：

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="home"
        screenOptions={({route}) => ({
          headerShown: route.name === 'MainContent',
        })}>
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="Register" component={Register} />
        <Stack.Screen
          name="MainContent"
          component={MyTabs}
          options={{header: () => <Header />}}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

函数应用程序（）{
返回(
({
headerShown:route.name===“MainContent”，
})}>
}}
/>
);
}

import Header from './src/components/Header';

const Tab = createMaterialTopTabNavigator();

function MyTabs() {
    return (
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomePage} />
        <Tab.Screen name="Friends" component={FriendsPage} />
        <Tab.Screen name="Store" component={StorePage} />
        <Tab.Screen name="Notifications" component={NotificationsPage} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}


const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator   initialRouteName="home" screenOptions={{
        headerShown: false
      }} >
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="Register" component={Register} />
        <Stack.Screen name="MainContent" component={MyTabs} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="home"
        screenOptions={({route}) => ({
          headerShown: route.name === 'MainContent',
        })}>
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="Register" component={Register} />
        <Stack.Screen
          name="MainContent"
          component={MyTabs}
          options={{header: () => <Header />}}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}