React Navigation Bottom TabBar 图标间距

Question

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

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

知道如何实现吗？

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

Answer 1

尝试 indicatorStyle 配置选项：

tabBarOptions: {

    indicatorStyle: {
      backgroundColor: 'transparent'
    }
}

Answer 2

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

tabBarOptions: {
    tabStyle: {
        paddingVertical: 5
    }
}

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

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

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

tabBarOptions: {
    indicatorStyle: {
        height: 0
    }
}

还有最后一个问题space单元格之间的问题，我觉得暂时没有解决办法

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

Answer 3

更改图标与栏顶部之间的距离（问题1 as of react-navigation 4.x), 在 tabBarOptions 内向 tabStyle 添加填充：

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

React Navigation Bottom TabBar 图标间距

React Navigation Bottom TabBar Icon Spacing

javascript

react-native

react-navigation