react-native - TabNavigator 额外填充

Question

如何设置 TabNavigator 选项卡的高度和内边距？我正在执行以下操作：

import Icon from "react-native-vector-icons/MaterialIcons";
const tabNav = TabNavigator({
  TabItem1: {
      screen: MainScreen,
      navigationOptions: {
          tabBarLabel:"Home",
          tabBarIcon: ({ tintColor }) => <Icon name={"home"} size={20} color={tintColor} />
      }
    },
    TabItem2: {
      screen: MainScreen,
      navigationOptions: {
        tabBarLabel:"Home",
        tabBarIcon: ({ tintColor }) => <Icon name={"home"} size={30} color={tintColor}  />
      }
    },
    TabItem3: {
      screen: MainScreen,
      navigationOptions: {
        tabBarLabel:"Browse",
        tabBarIcon: ({ tintColor }) => <Icon name={"home"} color={tintColor} />
      }
    }
}, {
    tabBarPosition: 'bottom',
    tabBarOptions: {
        activeTintColor: '#222',
        activeBackgroundColor :'yellow',  //Doesn't work
        showIcon: true,
        tabStyle: {
            padding: 0, margin:0,   //Padding 0 here
        },
    iconStyle: {
        width: 30,
        height: 30,
        padding:0       //Padding 0 here
    },
    }
});

如何摆脱图标和标签之间的填充？我做过padding:0，iconStyle也做过，tabStyle但没有运气。我也不想在下面填充label。我怎么做？谢谢。

发现额外的填充是由以下原因引起的View：

我该如何摆脱它？

score 9 · Accepted Answer

9

通过设置解决：

tabBarOptions: {
  labelStyle: {
    margin: 0
  },
}

于 2018-03-16T09:40:45.660 回答

score 4 · Accepted Answer

4

试style一下tabBarOptions

  tabBarOptions: {
    style: {
      height: 45
    }
  }

于 2017-10-20T15:11:29.887 回答

score 3 · Accepted Answer

不幸的是，这个库中的很多布局设置都是硬编码的（比如 padding: 12 for tab 默认来自其他地方）。

唯一的选择是查看 node_modules\react-navigation\lib\views\TabView\ 文件并根据需要进行调整。

现在我正在破解这些资源，以找到一种快速n-dirty的方式来允许矩形（x>y），而不仅仅是方形（x=y，默认）选项卡图标。

其他选项是按照维护人员的建议创建您的自定义 tabBar 组件

score 2 · Accepted Answer

我只是通过查看此页面https://reactnavigation.org/docs/en/material-top-tab-navigator.html做到的

我的 TabStack 看起来像这样：

const tabBarOptions = {
  labelStyle: {
    fontSize: 12,
  },
  tabStyle: {
    width: 100,
  },
  style: {
    paddingTop: 50,
    backgroundColor: 'red',
  },
}

export const TabStack = createMaterialTopTabNavigator({
  History: History,
  Current: Current,
  Settings: Settings,
}, {
    tabBarOptions: tabBarOptions
});

score 0 · Accepted Answer

今天遇到类似的问题，遇到了这篇文章。然而，我的问题有一个 - paddingBottom: 30 - 被应用于tabBarStyle。

我不想覆盖包文件，因为它可能会导致其他地方出现无法预料的问题，或者会在未来的更新中被覆盖。

我只是将值设置为负值，以使应用的整体填充为 0 - 即。paddingBottom：-30

不确定它是否会帮助某人，但它帮助了我。

score 0 · Accepted Answer

0

如果您SafeAreaView在屏幕内使用，请将其从根目录中删除，您会没事的

于 2021-12-29T07:58:50.027 回答

react-native - TabNavigator 额外填充

6 回答 6

Related

Reference