如何在本机反应中删除材料顶部标签栏上方的空白

Posted 2023-02-21

【中文标题】如何在本机反应中删除材料顶部标签栏上方的空白

【英文标题】：How to remove white space above a material top tab bar in react native

【发布时间】：2021-10-18 00:35:52

【问题描述】：

我正在寻找一种方法来删除我的 react native 顶部标签栏中以红色圈出的空白。

顶部标签栏位于堆栈导航器中，堆栈导航器是底部标签导航器

const BottomTab = () => 
  return (
    <Tab.Navigator
        style:  height: 55, borderTopWidth: 0, elevation: 0 ,
      
    >
      <Tab.Screen name="Home" component=Home />
      <Tab.Screen name="Recent" component=RecentStack />
      <Tab.Screen name="Profile" component=Profile />
    </Tab.Navigator>
  );
;

const RecentStack = () => 

  return (
      <Stack.Navigator screenOptions= headerShown: false >
        <Stack.Screen name="RecentTabs" component=RecentTopTabBar />
        <Stack.Screen name="TaskDetails" component=TaskDetails />
      </Stack.Navigator>
  );
;

const RecentTopTabBar = () => 
  return (
    <Tab.Navigator >
      <Tab.Screen name="Ongoing" component=OngoingJobs />
      <Tab.Screen name="Completed" component=CompletedJobs />
    </Tab.Navigator>
  );
;

我试图将 marginTop 设置为负数，但这只会使选项卡消失在空白处。 headerShown 属性为 false，那么空格可能是什么。

【参考方案1】：

我知道这很旧，您可能已经找到了解决方案，但是您是否尝试将 screenOptions= headerShown: false 添加到您的“BottomTab”导航器？

我在 react-navigation Bottom Tabs Navigator 中遇到了类似的问题，并且解决了它。