如何在React Navigation顶部栏中删除选项卡之间的空白

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

几天前我遇到了同样的问题。

这是我为您提供的解决方案：

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;

Answer 2

您可以通过简单地使用：]来调整高度。

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