Блог

Я ищу способ удалить пробел, обведенный красным в верхней панели вкладок 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, так что может быть пробелом.

Я знаю, что это устарело, и вы, вероятно, нашли решение, но пробовали ли вы добавить screenOptions={{ Заголовок: ложь }} в свой навигатор «Нижняя вкладка»?

Я столкнулся с аналогичной проблемой с навигатором нижних вкладок react-navigation, и это ее решило.