时间戳

首页 > 解决方案 > 在 BottomTabNavigator 上使用 safearealayoutguide 或 SafeAreaView 删除空白

ios - 在 BottomTabNavigator 上使用 safearealayoutguide 或 SafeAreaView 删除空白

问题描述

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

enter image description here

我正在尝试删除空格，我发表了另一篇我现在已经删除的帖子，有人建议使用 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 并放置所有无法解决问题的 brtween，我在这个网站上看到我必须使用insets 我已经尝试过，但它确实有效。

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

标签： iosreact-nativeexporeact-navigation

解决方案

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

 safeAreaInsets: {
      bottom: 0,
    },

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

推荐阅读