Reaction-导航-材质-底部-选项卡中的选项卡栏标签和图标的对齐问题 [英] Alignment Issue with tabBarLabel and Icon in react-navigation-material-bottom-tabs

问题描述

我正在为我的一个项目使用Reaction导航中的createMaterialBottomTabNavigator。如果我将Tab栏图标和Tab栏标签一起使用，图标将与文本重叠。需要帮助来解决该问题。 以下是我尝试过的--

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,
});

推荐答案

边距图标如下。它将完美地发挥作用。

<IconButton icon="tag" style={{marginTop: -3}} color={focused ? '#2E98FF' : '#000'} size={20}/>

这篇关于Reaction-导航-材质-底部-选项卡中的选项卡栏标签和图标的对齐问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！