react-native - 如何在 Material 顶部选项卡导航器上方呈现单个标题组件？

Question

我试图在包含两个屏幕的 Material 顶部选项卡导航器上方呈现单个标题。当不呈现标题时，顶部选项卡导航器会按预期出现在屏幕顶部。但是，在呈现自定义标题组件时，选项卡导航器消失了，但功能仍然存在(我仍然可以从第一个屏幕滑动到第二个屏幕)。如何呈现我的标题和顶部选项卡导航器？

function FeedTabs() {
const TabTop = createMaterialTopTabNavigator();
  return (
    <TabTop.Navigator 
    mode="card" 
    headerMode='screen' 
    initialRouteName='Feed'
    tabBarPosition='top'
    initialLayout={{ width: Dimensions.get('window').width }}
    tabBar= {({navigation, scene}) => 
    <FeedHeader
    title="Feed"
    navigation={navigation}
    scene={scene}
    />}
    >
      <TabTop.Screen name="Videos" component={Feed}/>
      <TabTop.Screen name="Articles" component={FeedArticles}/>
    </TabTop.Navigator>
  )

Answer 1

只需在顶部导航器之前添加标题组件，如下所示。就我而言，我的标题组件是名为 BrandProfileCard 的组件

const BrandProfileNavigator = ({props}) => {
 return (
    <>
      <BrandProfileCard />
      <Tab.Navigator
        initialRouteName={appRoutes.BRAND_PROFILE}
        tabBarOptions={{
          labelStyle: {fontSize: 12},
        }}
        {...props}>
        {brandProfileROutes.map(({name, component, options}) => {
          return (
            <Tab.Screen
              name={name}
              component={component}
              key={name}
              options={options}
            />
          );
        })}
      </Tab.Navigator>
    </>
  );
};