如何删除反应导航顶部栏中选项卡之间的空白

Question

如何删除 react-navigation 顶部栏中选项卡之间的空白。 所以应该发生的是选项卡大小应该根据屏幕大小进行调整。

这就是我的导航目前的样子。

你可以看到选项卡真的很大。 他们占用了太多空间。 我怎样才能得到那些空白，这样标签就只需要足够的大小来适应标签名称。

我试过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,
       }
      }}
>

Answer 3

在 homeTabNavigator 样式中将 shadowOffset 和 elevation 设置为 0

Answer 4

像这样将宽度设置为自动：

screenOptions={{
   tabBarItemStyle: {width: "auto"}
}}