反应导航底部标签栏图标间距答案

【问题标题】：React Navigation Bottom TabBar Icon Spacing反应导航底部标签栏图标间距
【发布时间】：2017-07-10 10:08:43
【问题描述】：

我将 React Navigation 与 React Native 一起使用。这是在安卓上。

我正在尝试在图标和标签栏顶部之间添加一些间距，并缩小图标和标签之间的间距。
我正在尝试更改底部边框颜色，即黄线。
我正在尝试减少间距，在每个单元格内左右填充。

知道如何实现这一目标吗？

{
    tabBarPosition: 'bottom',
    animationEnabled: true,
    swipeEnabled: true,
    tabBarOptions: {
      showIcon: true,
      labelStyle: {
        fontSize: 8
      },
      style: {
        backgroundColor: 'grey',
      },
      tabStyle: {
        height: 49
      },
      iconStyle: {
        flexGrow: 0,
        marginTop: 1.5
      }
    }
  }

【问题讨论】：

真的很难帮上忙。可以放在零食里吗？小吃.expo.com

标签： javascript react-native react-navigation

【解决方案1】：

关于图标和标签栏顶部之间的间距的第一个问题，您可以在tabBarOptions 的tabStyle 属性中添加填充：

tabBarOptions: {
    tabStyle: {
        paddingVertical: 5
    }
}

为了减少图标和标签之间的空间，您可以为您的Icon 对象添加一些内边距或边距：

tabBarIcon: ({ tintColor }) => {
    return <Icon containerStyle={{ marginTop: 6 }} name="map" size={25} color={tintColor} />;
},

关于Android上活动黄线的问题，可以将背景颜色属性改为transparent或设置0为高度：

tabBarOptions: {
    indicatorStyle: {
        height: 0
    }
}

关于最后一个关于单元格之间的空间问题的问题，我认为目前还没有解决方案。

您可以尝试使导航更小（例如：width: '80%'）...这将使单元格彼此靠近...但我从未尝试过，我不确定这是一个好的解决方案;)

【讨论】：

你应该使用renderIndicator: () => null, 在底部不显示高亮。
paddingVertical 似乎没有改变图标和顶栏之间的距离。

【解决方案2】：

要更改图标和栏顶部之间的距离（react-navigation 4.x 中的问题 1），请向 tabStyle 在 tabBarOptions 内：

tabBarOptions: {
    tabStyle: {
      paddingBottom: 8,
      paddingTop: 8,
    }
}

【讨论】：

【解决方案3】：

试试 indicatorStyle 配置选项：

tabBarOptions: {

    indicatorStyle: {
      backgroundColor: 'transparent'
    }
}

【讨论】：