添加边距/填充以响应导航选项卡会导致内容溢出 [英] Adding margin/padding to react navigation tabs causes contents to overflow

问题描述

labelStyle 应用如下会导致顶部出现间隙:

labelStyle applied as below causes a gap at the top:

const tabNavigator = createBottomTabNavigator(
  {
    HomeStack,
    RecipesStack,
    FavoriteStack,
    ProductsStack,
  },
  {
    tabBarOptions: {
      activeBackgroundColor: '#8BC540',
      inactiveBackgroundColor: '#349746',
      activeTintColor: '#F5F4F4', // tab text color
      inactiveTintColor: '#F5F4F4',
      // This messes up the bottom bar
      labelStyle: {
        marginTop: 15,
        marginBottom: 4,
      },
    },
  }
);

外观如下:

我想在图标上方、标签和图标之间以及标签下方添加填充.

I'd like to add padding above icons, between the label and icons and below label.

推荐答案

据我所知，这是因为我用 SafeAreaView 包装了我的应用程序.

As far as I can tell this was being caused by fact that I wrapped my app with SafeAreaView.

一旦我删除了 SafeAreaView，下面的样式就起作用了:

Once I removed SafeAreaView, the style below worked:

tabBarOptions: {
      activeBackgroundColor: '#8BC540',
      inactiveBackgroundColor: '#349746',
      activeTintColor: '#F5F4F4', // tab text color
      inactiveTintColor: '#F5F4F4',
      tabStyle: {
        paddingTop: 10,
      },
      style: {
        height: 58,
      },
      labelPosition: 'below-icon',
      labelStyle: {
        marginTop: 5,
        marginBottom: 4,
      },
    }

这篇关于添加边距/填充以响应导航选项卡会导致内容溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！