如何在材质顶部选项卡导航器上方呈现单个标题组件？答案

【问题标题】：How to render a single header component above material top tab navigator?如何在材质顶部选项卡导航器上方呈现单个标题组件？
【发布时间】：2020-05-13 01:24:42
【问题描述】：

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

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

【问题讨论】：

任何解决方案了吗？

标签： react-native react-navigation

【解决方案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>
    </>
  );
};

【讨论】：

【解决方案2】：

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

您需要将选项卡导航器添加到 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>
  );
}

【讨论】：