Bottom Tab Navigatorで問題が発生しています。タブとiPhone 11 Simulatorの画面の端の間に空白があります。iPhone 8シミュレータでは、これらの空白はありません。タブの上に小さな空白もあります。このスペースを削除するにはどうすればよいですか？解決策を見つけることができず、時間が不足しています。ありがとう！

これはこれまでの私の実装です：

DetailsNavigation.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;