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

【问题标题】：How to remove white space between the tabs in react navigation top bar如何删除反应导航顶部栏中选项卡之间的空白
【发布时间】：2020-04-24 22:42:05
【问题描述】：

如何删除 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;

【问题讨论】：

标签： javascript reactjs react-native react-native-navigation react-native-tabnavigator

【解决方案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;

【讨论】：

仅设置width 属性之间仍会留出大量空间。将marginHorizontal 设置为负值以完全消除空格。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

请解释清楚你为什么这么说
默认情况下，在 react 导航中，shadowOffset 或高程值不为零。这意味着它会产生一些阴影。为了消除这一点，我们将它们设为零。（注意：shadowOffset 在 ios 中用于阴影。在 Android 中，我们可以借助高程来实现）