Question

我在反应原生项目中使用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,
          },
        },
      },

Answer 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'
      }

Answer 2

margin: 8有labelStyle。

更改labelStyle修复了：

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

底部标签栏的一部分是隐藏的

2 个答案: