javascript - React Navigation底部TabBar图标间距(React Navigation Bottom TabBar Icon Spacing)

Question

I am using React Navigation with React Native.(我正在将React Navigation与React Native一起使用。)

This is on Android.(这是在Android上。)

1. I am trying to add some spacing between the icon and the top of the tab bar and reduce the spacing between icon and the label.(我试图在图标和标签栏顶部之间增加一些间距，并减小图标和标签之间的间距。)

2. I am trying to change the bottom border color ie Yellow line.(我正在尝试更改底部边框的颜色，即黄线。)

3. I am trying to reduce the spacing, padding left and right inside each cell.(我试图减少间距，在每个单元格内左右填充。)

Any idea how I can achieve this?(知道我该如何实现吗？)

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

  ask by Kelvin translate from so

Answer 1

Regarding the first problem about the spacing between the icon and the top of the tab bar you can add padding to the tabStyle property in tabBarOptions :(关于图标和标签栏顶部之间的间距的第一个问题，您可以在tabBarOptions的tabStyle属性中添加填充：)

tabBarOptions: {
    tabStyle: {
        paddingVertical: 5
    }
}

For reducing the space between the icon and the label , you can add some padding or margin to your Icon object:(为了减少图标和标签之间的空间 ，可以向Icon对象添加一些填充或边距：)

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

About the problem with the active Yellow line on Android, you can change the background color property to be transparent or set 0 for height:(关于Android上的活动黄线问题，您可以将背景颜色属性更改为transparent或将高度设置为0 ：)

tabBarOptions: {
    indicatorStyle: {
        height: 0
    }
}

And for the last problem about the problem about the space between the cells , I don't think that there is a solution for now.(关于单元之间的空间问题的最后一个问题，我认为目前尚无解决方案。)

You can try to make the navigation smaller ( for example: width: '80%' )... this will set the cells closer to each other... but I have never tried that and I am not sure is it a good solution ;)(您可以尝试使导航更小（例如： width: '80%' ）...这将使单元格彼此更靠近...但是我从未尝试过，而且我不确定这是否是一个好的解决方案;）)