javascript - react 导航底部标签栏图标间距

我正在将 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
      }
    }
  }

最佳答案

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

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%' )...这将使单元格彼此更接近...但我从未尝试过，我不确定它是否是一个好的解决方案；)

关于javascript - react 导航底部标签栏图标间距，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45009286/