Css 使用选项卡BarLabel和react导航材质底部选项卡中的图标的对齐问题

我正在为我的一个项目使用React Navigation中的createMaterialBottomTabNavigator。如果同时使用tabBarIcon和tabBarLabel，图标与文本重叠。需要帮助来解决这个问题。 这是我试过的-

const MainNavigator = createMaterialBottomTabNavigator({
  Offers: {
    screen: OffersNavigator,
    navigationOptions:{
      tabBarIcon: (
        {focused}) => {
          return <IconButton icon="tag" style={{marginBottom: 5}} color={focused ? '#2E98FF' : '#000'} size={20}/>
      },
      tabBarLabel: 'Offers',
    },
  },
  Search: SearchNavigator,
  Settings: SettingsNavigator,
});

const MainNavigator=createMaterialBottomTabNavigator({
提供：{
屏幕：OffersNavigator，
导航选项：{
塔巴瑞康：(
{聚焦}）=>{
返回
},
tabBarLabel:“优惠”，
},
},
搜索：SearchNavigator，
设置：设置激活器，
});

---

像这样的边距图标。它将完美地工作

---

像这样的边距图标。它将完美地工作

---

哦，我明白了。由于高度固定，它们呈椭圆形。谢谢你的帮助：）哦，我明白了。由于高度固定，它们呈椭圆形。谢谢你的帮助：）