javascript – React Navigation Bottom TabBar图标间距

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

解决方法:

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

tabBarOptions: {
    tabStyle: {
        paddingVertical: 5
    }
}

要减少图标和标签之间的空间,可以为Icon对象添加一些填充或边距：

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

关于Android上活动黄线的问题,您可以将背景颜色属性更改为透明或将高度设置为0：

tabBarOptions: {
    indicatorStyle: {
        height: 0
    }
}

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

您可以尝试使导航更小(例如：宽度：’80％’)…这将使细胞彼此更接近……但我从未尝试过,我不确定它是否是一个很好的解决方案;)

标签：react-navigation,javascript,react-native
来源： https://codeday.me/bug/20190823/1699775.html