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

【问题标题】：Alignment Issue with tabBarLabel and Icon in react-navigation-material-bottom-tabsreact-navigation-material-bottom-tabs 中 tabBarLabel 和 Icon 的对齐问题
【发布时间】：2019-11-07 03:44:50
【问题描述】：

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

【问题讨论】：

标签： css reactjs react-native react-navigation react-native-paper

【解决方案1】：

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

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

【讨论】：

哦，我明白了。由于固定的高度，它们是卵形重叠的。感谢您的帮助:)