Javascript 我如何让我的react 导航屏幕覆盖整个屏幕

我正在try 让 map 屏幕覆盖整个屏幕，目前它没有覆盖底部导航器应该在的底部.我使用的是一个定制的底部导航器，所以它不在底部，这就是为什么在底部有一个平淡的空间.我的问题是如何让我的 map 覆盖底部的空白处？

我的代码是:

import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View, Image } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import MapView from 'react-native-maps';
import { Marker } from 'react-native-maps';
import FontAwesome from "@expo/vector-icons/FontAwesome"

const Tab = createBottomTabNavigator();

function HomeScreen() {
  return (
    <View style={styles.mapContainer}>
      <MapView style={styles.map} />
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={styles.container}>
      <Text>Settings Sn</Text>
    </View>
  );
}

const CustomTabBarButton = ({ children, onPress }) => {
  return (
  <TouchableOpacity
    style={{
      top: -30,
      justifyContent: 'center',
      alignItems: 'center',
      ...styles.shadow
    }}
    onPress={onPress}
  >
    <View style={{
      width: 50,
      height: 50,
      borderRadius: 50,
      backgroundColor: "#355E3B"
    }}>
      {children}
    </View>
  </TouchableOpacity>)
};

export default function Navigation() {
  return (
    <NavigationContainer>
      <Tab.Navigator
            screenOptions={({ route }) => ({
                tabBarIcon: ({ color, focused, size }) => {
                    let icon;
                    if (route.name === "Map") {
                        icon = "map"
                        return <FontAwesome name={icon} size={28} color={color} />
                    } else if (route.name === "Settings") {
                        icon = "cog"
                        return <FontAwesome name={icon} size={28} color={color} />
                    }
                    return null
                },
                tabBarShowLabel: false,
                tabBarIconStyle: {},
                tabBarStyle: [{ 
                  display: "flex",
                  bottom: 20,
                  elevation: 5,
                  borderRadius: 10,
                  marginLeft: 10,
                  marginRight: 10,
                  height: 60
                 }, null],
                tabBarActiveTintColor: "#000000"
            })}
        >
        <Tab.Screen name="Map" component={HomeScreen}  />
        <Tab.Screen
  name="Plus"
  component={HomeScreen}
  options={{
    tabBarIcon: ({ focused }) => (
      <Image source={require('./assets/plus.png')} resizeMode='contain' style={{
        width: 30,
        height: 30
      }} />
    ),
    tabBarButton: (props) => {
      return <CustomTabBarButton {...props} />
    }
  }}
/>
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  shadow: {
    shadowColor: '#000000',
    shadowOffset: {
      width: 0,
      height: 10
    },
    shadowOpacity: 0.2,
    shadowRadius: 3.5,
    elevation: 5
  },
  container: {
    flex: 1
  },
  map: {
    width: '100%',
    height: '110%',
  },
  mapContainer: {
    height: '100%'
  }
});

问题的图景: