React Native中地图底部覆盖层异常置顶的问题求助

各位React Native的大佬们，我最近在开发一个带地图的货运列表页面，遇到了一个棘手的布局问题，折腾了好几天都没解决，想请大家帮忙排查一下🥺

我想要实现的效果是：地图作为全屏背景，底部固定一个蓝色的覆盖层（包含标题和横向滚动的货运卡片），但现在这个蓝色覆盖层一直钉在屏幕最顶部，完全不是我预期的底部位置。从样式代码来看我已经设置了相关定位属性，但就是不生效；尝试用flex布局让元素分上下区域也没实现想要的效果。

我给MapView加了mapPadding={{ bottom: 180 }}，想着给底部覆盖层预留空间，但覆盖层的位置还是不对。现在完全摸不着头脑，不知道是定位属性用错了，还是组件嵌套的问题？

以下是我的代码：

组件JSX部分 #

return (
  <View style={styles.container}>
    <MapView
      ref={mapRef}
      style={styles.map}
      initialRegion={{
        latitude: 35.6892,
        longitude: 51.389,
        latitudeDelta: 0.5,
        longitudeDelta: 0.5,
      }}
      mapPadding={{ bottom: 180, top: 0, left: 0, right: 0 }}
      paddingAdjustmentBehavior="automatic"
    >
      {cargoList.map((cargo) => (
        <Marker
          key={cargo.id}
          coordinate={{ latitude: cargo.origin_lat, longitude: cargo.origin_lng }}
          pinColor={selectedCargoId === cargo.id ? "blue" : "red"}
        />
      ))}
    </MapView>
    <SafeAreaView style={styles.overlay}>
      <View style={styles.titlebox}>
        <Text style={styles.title}>بارهای</Text>
      </View>
      <FlatList
        horizontal
        data={cargoList}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <TouchableOpacity
            onPress={() => handleCardPress(item)}
            style={[
              styles.card,
              selectedCargoId === item.id && styles.selectedCard,
            ]}
          >
            <View style={styles.createtime}>
              <Text style={styles.time}>{item.created_at}</Text>
            </View>
            <View style={styles.boxloc}>
              <Text style={styles.origin}>مبدا: {item.origin}</Text>
              <Text style={styles.destination}>مقصد: {item.destination}</Text>
            </View>
            <View style={styles.cargoinfo}>
              <Text>کرایه: {item.base_rent} تومان</Text>
              <Text>نوع کالا: {item.product_name}</Text>
            </View>
          </TouchableOpacity>
        )}
        contentContainerStyle={{ paddingHorizontal: 15 }}
      />
    </SafeAreaView>
  </View>
);

样式部分 #

const styles = StyleSheet.create({
  container: {
    position: "relative",
  },
  map: {
    width: Dimensions.get("window").width,
    height: Dimensions.get("window").height,
    position: "absolute",
  },
  overlay: {
    width: "100%",
    padding: 12,
    backgroundColor: "#aff",
    position: "absolute",
    flex: 1,
  },
  // 其他样式（如titlebox、card等）已按需求定义，但未影响当前布局问题
});

我现在的核心困惑：

• 为什么设置了position: absolute的覆盖层没有定位到屏幕底部？
• 是不是SafeAreaView的嵌套逻辑影响了布局优先级？
• 有没有更稳妥的布局方案能实现「全屏地图+底部固定覆盖层」的效果？

麻烦各位大佬帮忙看看问题出在哪，或者给我一些调整建议，谢谢大家了！

内容来源于stack exchange