React Native BottomTabNavigator 删除空白

Question

我的底部选项卡导航器出现问题。我的选项卡和 iPhone 11 模拟器屏幕末端之间有一个空白区域。在 iPhone 8 模拟器上，我没有这些空白。选项卡上方还有一个小的空白区域。我怎样才能删除这个空间？我找不到解决方案，而且时间不多了。谢谢！

到目前为止，这是我的实现：

详情导航.js

  const DetailsNavigation = ({ route }) => {
  return (
    <Tab.Navigator
      tabBarOptions={{
        activeBackgroundColor: colors.primary,
        activeTintColor: colors.secondary,
        inactiveBackgroundColor: colors.secondary,
        inactiveTintColor: colors.primary,
        labelStyle: {
          fontSize: 13,
          marginBottom: 5,
        },
      }}
    >
      <Tab.Screen
        name="DetailsScreen"
        options={{
          title: "Portfolio",
          tabBarIcon: ({ color, size }) => (
            <MaterialIcons name="account-box" size={24} color={color} />
          ),
        }}
        children={() => <DetailsScreen worker={route.params} />}
      />
      <Tab.Screen
        name="RatingScreen"
        component={RatingScreen}
        options={{
          title: "Bewertungen",
          tabBarIcon: ({ color, size }) => (
            <MaterialIcons name="star" size={24} color={color} />
          ),
        }}
      />
    </Tab.Navigator>
  );
};
export default DetailsNavigation;

DetailsNavigation.js 在这里实现：

WorkersNavigation.js

const WorkersNavigation = (props) => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="WelcomeScreen"
        component={WelcomeScreen}
        options={{ headerShown: false }}
      ></Stack.Screen>
      <Stack.Screen
        name="WorkersScreen"
        component={WorkersScreen}
        options={{ headerShown: false }}
      ></Stack.Screen>
      <Stack.Screen
        name="DetailsNavigation"
        component={DetailsNavigation}
        options={{ headerShown: false }}
      ></Stack.Screen>
    </Stack.Navigator>
  );
};

export default WorkersNavigation;

Answer 1

在white spaceiPhone上的X设备发现上述被称为安全区，并存在以确保基于设备和上下文适当insetting。有关更多信息，请参阅官方人机界面指南。

react-navigation 的 BottomTabNavigator 支持默认的 BottomTabBar开箱即用的安全区域，因此为了删除它下面的 SafeArea，您需要覆盖为 BottomTabNavigator 提供的设置。

<Tab.Navigator
    tabBarOptions={ {
        ...
        safeAreaInsets: {
            bottom: 0,
        },
    } }
>
...
</Tab.Navigator>

Answer 2

我认为你像这样在 WorkersNavigation 之外包装

<SafeAreaView> 
<WorkersNavigation /> 
</SafeAreaView>