部分底部标签栏被隐藏

Question

我使用 React Navigation 在 React Native 项目中进行路由和导航。我有一个底部标签栏组件，它部分隐藏在 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,
          },
        },
      },

Answer 1

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

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

Answer 2

有 margin: 8 labelStyle。

更改 labelStyle 修复了以下问题：

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