Как убрать пробел между вкладками в верхней панели реагирующей навигации

Question

Как удалить пробел между вкладками в верхней панели реагирующей навигации. Так что должно произойти, размер вкладки должен корректироваться в зависимости от размера экрана.

Вот так выглядит моя навигация в данный момент.

Вы видите, что вкладки действительно большие. Они занимают слишком много места. Как я могу получить эти пробелы, чтобы у вкладок был только размер, достаточный, чтобы соответствовать имени вкладки.

Я попытался стилизовать Tab.Navigator безуспешно. Например, я попробовал следующее:

<Tab.Navigator
      initialRouteName="All"
      tabBarOptions={{
        scrollEnabled: true,
        labelStyle: { padding: 0, margin: 0, border: 0 },
        tabStyle: { padding: 0, margin: 0, border: 0 },
      }}
      lazy={true}
      style={{ padding: 0, margin: 0, border: 0 }}
    >

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";

import Home from "../screens/Home";

const Tab = createMaterialTopTabNavigator();
const Stack = createStackNavigator();

const HomeTabNavigation = () => {
  return (
    <Tab.Navigator
      initialRouteName="All"
      tabBarOptions={{
        scrollEnabled: true,
        labelStyle: { padding: 0, margin: 0, border: 0 },
        tabStyle: { padding: 0, margin: 0, border: 0 },
      }}
      lazy={true}
      style={{ padding: 0, margin: 0, border: 0 }}
    >
      <Tab.Screen name="All" component={Home} />
      <Tab.Screen name="Hot" component={Home} />
      <Tab.Screen name="Winners" component={Home} />
    </Tab.Navigator>
  );
};

const HomeNavigation = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="HomeTabNavigation" component={HomeTabNavigation} />
    </Stack.Navigator>
  );
};

export default HomeNavigation;

Answer 1

Вы можете отрегулировать высоту, просто используя:

<Tab.Navigator
      initialRouteName="All"
      tabBarOptions={{
        style: {
          height: 40,
       }
      }}
>

Answer 2

У меня была такая же проблема всего пару дней go.

Вот мое решение для вас:

import React from "react";
import { useWindowDimensions } from "react-native"; // <-- add this hook
import { createStackNavigator } from "@react-navigation/stack";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";

import Home from "../screens/Home";

const Tab = createMaterialTopTabNavigator();
const Stack = createStackNavigator();

const tabsConfig = () => {
    const { width } = useWindowDimensions()
    return {
        lazy: true,
        tabBarOptions: {
            showLabel: true,
            tabStyle: {
                // here you can set the tab width , in this case , 3 tabs , width / 3
                width: width / 3,
                justifyContent: 'center',
                alignItems: 'center',
                alignSelf: 'center',
            },
            indicatorStyle: {
                borderWidth: 1,
                borderColor: 'red',
            }
        },
    }
}

const HomeTabNavigation = () => {
  return (
    <Tab.Navigator {...tabsConfig()}>
      <Tab.Screen name="All" component={Home} />
      <Tab.Screen name="Hot" component={Home} />
      <Tab.Screen name="Winners" component={Home} />
    </Tab.Navigator>
  );
};

const HomeNavigation = () => {
  return (
      <Stack.Navigator>
        <Stack.Screen name="HomeTabNavigation" component={HomeTabNavigation} />
      </Stack.Navigator>
  );
};

export default HomeNavigation;