如何在材质顶部选项卡导航器上方渲染单个标题组件？

Question

我正在尝试在包含两个屏幕的材质顶部选项卡导航器上方渲染单个标题。当不渲染标题时，顶部选项卡导航器将按预期显示在屏幕顶部。但是，在渲染自定义标头组件时，选项卡导航器消失，但功能仍然存在（我仍然可以从第一个屏幕滑动到第二个屏幕）。如何渲染标题和顶部选项卡导航器？

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

我可能会迟到，但这是我的解决方案

您需要将选项卡导航器添加到 stack.screen

我的代码示例：MyTabsStack()

    function MyTabsStack() {

  return (
    <Stack.Navigator initialRouteName="MyTabs">
      <Stack.Screen name="Offers"  component={MyTabs} options={({route, navigation}) => ({
            title: "My Offers",
              headerTintColor: '#fff',
              headerTitleStyle: {
                fontWeight: 'bold',
                borderBottomWidth:0,
                alignSelf: 'center'
                
              }
            })} />
    </Stack.Navigator>
  );
}

我的标签()

function MyTabs() {

const toptabBarOptions = { 
  style: { backgroundColor: '#fff'},
  labelStyle: { fontSize:18 },
  indicatorStyle: {backgroundColor: '#2099AF',},
  activeTintColor: '#2099AF',
 inactiveTintColor: 'gray',
}


  return (
    <Tabtop.Navigator tabBarOptions={toptabBarOptions}>
      <Tabtop.Screen name="Selling" component={Offers} />
      <Tabtop.Screen name="Buying" component={Boards} />
      <Tabtop.Screen name="Boards" component={Boards} />

    </Tabtop.Navigator>
  );
}