React Native BottomTabNavigator удаляет пробелы

Question

У меня проблема с нижним навигатором вкладок. Между вкладками и концом экрана моего 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;

Answer 1

Я думаю, вы обернулись за пределами WorkersNavigation вот так

<SafeAreaView> 
<WorkersNavigation /> 
</SafeAreaView>

Answer 2

white space, обнаруженный на устройствах iPhone X и выше, называется безопасной зоной и существует для обеспечения соответствующей вставки в зависимости от устройства и контекста. Обратитесь к официальным Руководствам по человеческому интерфейсу для получения дополнительной информации.

BottomTabNavigator от react-navigation поддерживает безопасные области для по умолчанию BottomTabBar , поэтому чтобы удалить SafeArea под ним, вам необходимо переопределить настройки, предоставленные для BottomTabNavigator.

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