在 BottomTabNavigator 上使用 safearealayoutguide 或 SafeAreaView 去除空白

问题描述

我正在开发一个应用程序，我正在使用 createBottomTabNavigator 创建我的菜单。这是在 ios 11 及更高版本上的样子：

我正在尝试删除空格，我发表了另一个帖子，现在我已经删除了，有人建议使用 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 我已经尝试过，但它确实有效。

我正在世博会工作，我真的很想解决这个问题，花了很多时间在这个问题上，但仍然有同样的问题。会提供一些帮助！

解决方法

您可以在Tab.Navigator的{​​{1}}

中执行以下操作

tabBarOptions

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