Javascript 反应导航底部选项卡栏图标间距

我正在对React Native使用React导航。这是安卓上的

我试图在图标和选项卡栏顶部之间添加一些间距，并减小图标和标签之间的间距

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

我试图缩小间距，在每个单元格内左右填充

你知道我怎样才能做到这一点吗

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

---

尝试指示符号样式配置选项：

tabBarOptions: {

    indicatorStyle: {
      backgroundColor: 'transparent'
    }
}

---

关于图标与选项卡栏顶部之间的间距的第一个问题，您可以在

tabBarOptions

中的

tabStyle

属性中添加填充：

tabBarOptions: {
    tabStyle: {
        paddingVertical: 5
    }
}

为了减少图标和标签之间的空间，您可以向

图标

对象添加一些填充或边距：

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

关于最后一个关于细胞间距的问题，我认为目前还没有解决方案

---

您可以尝试缩小导航（例如：

宽度：“80%”

）。。。这将使细胞彼此更靠近。。。但我从未尝试过，我不确定这是一个好的解决方案；）

要更改图标与栏顶之间的距离（问题1自react navigation 4.x起），请在tabStyle内部选项卡选项中添加填充：

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

---

真的很难帮上忙。你能把它放在点心里吗？snack.expo.com您应该使用

renderIndicator:（）=>null，

不在底部显示高光。paddingVertical似乎不会改变图标和顶部栏之间的距离。

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