React 导航底部 TabBar 图标间距

Question

我正在将 React Navigation 与 React Native 结合使用。这是在安卓上。

1. 我正在尝试在图标和选项卡栏顶部之间添加一些间距，并减少图标和标签之间的间距。

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

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

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

{
    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

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

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%'

）...这将使单元格彼此更靠近...但我从未尝试过，并且我不确定这是否是一个好的解决方案；）

Answer 2

要更改图标与栏顶部之间的距离（从 react-navigation 4.x 开始的问题 1），请在 tabBarOptions 内的 tabStyle 添加填充：

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

Answer 3

尝试指标样式配置选项：

tabBarOptions: {

    indicatorStyle: {
      backgroundColor: 'transparent'
    }
}

Answer 4

 <Tab.Screen
    name="Account"
    component={Account}
    options={{
      tabBarItemStyle: {paddingTop: 5},//use This for Icon or image
      tabBarLabelStyle: {paddingBottom: 5},// use This for lable 
      tabBarLabel: 'Account',
      tabBarIcon: ({color, size}) => (
        <UserIcon
          width={SIZES.huge_20}
          height={SIZES.huge_20}
          fill={color}
        />