在BottomTabNavigator上使用safearealayoutguide或SafeAreaView删除空格

Question

我正在开发一个应用程序，我正在使用createBottomTabNavigator创建我的菜单。这是iOS11和更多操作系统上的样子：

​

​

我正在尝试删除空白，我做了另一个帖子，现在我已经删除了，有人建议使用safearealayoutguide指南，但我不在哪里使用。

这是我的createBottomTabNavigator：

const Tab = createBottomTabNavigator();
const BottomTabs = () => (
  <Tab.Navigator
    initialRouteName="Home"
    tabBarOptions={{
      style: {
        borderTopWidth: 0,
      },
      activeBackgroundColor: "#01ba73",
      inactiveBackgroundColor: "#003923",
      showLabel: false,
    }}
  >
    <Tab.Screen
      name="Home"
      ..
    />
    <Tab.Screen
      name="Search"
      ..
    />
    <Tab.Screen
      name="Scanner"
      component={ScannerScreen}
      ..
    />
    <Tab.Screen
      name="Chat"
      ...
    />
    <Tab.Screen
      name="Profile"
      ....
    />
  </Tab.Navigator>
);

在我的主页中，如果我使用SafeAreaView并将所有不能解决问题的东西放在中间，我在这个网站上看到我必须使用insets我已经尝试过了，但它不起作用。

我正在为世博会工作，我真的很想解决这个问题，花了很多时间在这个上面，仍然有同样的问题。希望能帮上忙！

Answer 1

您可以在Tab.Navigator的tabBarOptions中执行以下操作

 safeAreaInsets: {
      bottom: 0,
    },

但我想，它看起来并不好。更好的方法是使用SafeAreaView