底部标签栏的一部分被隐藏答案

【问题标题】：Part of bottom tab bar is hidden底部标签栏的一部分被隐藏
【发布时间】：2018-03-22 13:50:36
【问题描述】：

我在 react native 项目中使用React Navigation 进行路由和导航。我有一个底部标签栏组件，它部分隐藏在 Android 中。

TabNavigator

...    
{
        lazy: true,
        tabBarPosition: 'bottom',
        animationEnabled: false,
        initialRouteName: 'Schedule',
        swipeEnabled: false,
        tabBarOptions: {
          showIcon: true,
          showLabel: true,
          allowFontScaling: true,
          upperCaseLabel: false,
          activeTintColor: Colors.white,
          inactiveTintColor: Colors.darkGrey,
          indicatorStyle: {
            // backgroundColor: 'transparent',
          },
          labelStyle: {
            fontSize: 15,
            fontWeight: '500',
          },
          style: {
            backgroundColor: Colors.darkBlue,
            height: 50,
          },
          iconStyle: {
            height: TAB_ICON_SIZE,
            width: TAB_ICON_SIZE,
            padding: 0,
            margin: 0,
          },
        },
      },

【问题讨论】：

标签： android android-layout react-native tabs react-navigation

【解决方案1】：

将以下 alignSelf 属性添加到 iconStyle 并确保 TAB_ICON_SIZE 不大于 24。因为它遵循 react-native android 中的材料 guid 设计。

iconStyle: {
        height: TAB_ICON_SIZE,
        width: TAB_ICON_SIZE,
        padding: 0,
        margin: 0,
        alignSelf: 'center'
      }

【讨论】：

感谢您的回复，TAB_ICON_SIZE 是 20，当我添加 alignSelf: 'center' 时，没有任何变化

【解决方案2】：

margin: 8 对应于 labelStyle。

更改 labelStyle 修复了：

labelStyle: {
        fontSize: 15,
        fontWeight: '500',
        margin: 2,
      },

【讨论】：