React Navigation Bottom TabBar图标间距

Question

我正在使用React Navigation和React Native。这是在Android上。

1. 我正在尝试在图标和标签栏顶部之间添加一些间距，并缩小图标和标签之间的间距。

2. 我正在尝试更改底部边框颜色，即黄线。

3. 我正在尝试减少间距，在每个单元格内左右填充。

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

Observable

https://www.openssl.org/docs/man1.1.0/crypto/X509_CRL_get0_by_cert.html

Answer 1

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

Icon

对于减少图标和标签之间的空间，您可以为tabBarIcon: ({ tintColor }) => { return <Icon containerStyle={{ marginTop: 6 }} name="map" size={25} color={tintColor} />; }, 对象添加一些填充或边距：

transparent

关于Android上活动黄线的问题，您可以将背景颜色属性更改为0或将tabBarOptions: { indicatorStyle: { height: 0 } } 更改为高度：

width: '80%'

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

您可以尝试让导航变小（例如：{{1}}）...这会将细胞设置得更接近......但我从来没有尝试过，我不确定它是不是好的解决方案;）

Answer 2

尝试使用indicatorStyle配置选项：

tabBarOptions: {

    indicatorStyle: {
      backgroundColor: 'transparent'
    }
}

Answer 3

要更改图标与条形顶部之间的距离（自 react-navigation 4.x 起的问题 1 ），请在 <在 tabBarOptions 中的em> tabStyle ：

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