react-navigation-material-bottom-tabs 中 tabBarLabel 和 Icon 的对齐问题

Question

我正在为我的一个项目使用 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,
});

Answer 1

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

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