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>
  );
}

MyTabs（）

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>
  );
}

Answer 2

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

final status = await Permission.locationWhenInUse.request();

如何在材料顶部选项卡导航器上方呈现单个标头组件？

2 个答案: