如何让React Navigation地图页面覆盖全屏底部空白？

问题描述 #

自定义Bottom Tab Navigator时设置了bottom:20让导航栏悬浮在屏幕上方，导致地图页面底部出现空白区域，无法铺满全屏。

解决思路 #

由于导航栏上移了20px，屏幕底部多出了20px的空白，我们需要让地图容器延伸覆盖这个空白区域，同时使用flex布局确保地图占满整个可用空间。

修改步骤 #

1. 调整地图容器的样式，用flex:1替代固定高度，同时添加marginBottom: -20抵消导航栏上移带来的底部空白。
2. 将MapView的样式改为flex:1，让它自动占满容器全部空间，替代原来的百分比高度设置。
3. 确保Tab导航的屏幕没有额外内边距限制内容延伸到底部。

修改后的完整代码 #

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: {
    flex: 1,
  },
  mapContainer: {
    flex: 1,
    marginBottom: -20, // 抵消TabBar的bottom:20带来的底部空白
  }
});

额外说明 #

如果项目中使用了安全区域（SafeAreaView），需要确保地图容器不受安全区域底部内边距的限制，或者根据实际设备调整marginBottom的数值，保证地图刚好覆盖屏幕底部的空白区域。

内容的提问来源于stack exchange，提问作者LetItBurn