添加边距/填充以响应导航选项卡会导致内容溢出

Question

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

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,
      },
    },
  }
);

它的外观如下：

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

Answer 1

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

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

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,
      },
    }