Expo React Native：让MapView显示在BottomSheet上方而非被遮挡

核心思路是根据BottomSheet的第一个停靠点高度，限制MapView的渲染范围，避免其延伸到Sheet下方。以下是两种可行的实现方式：

方式一：利用BottomSheet内置Hook获取停靠点高度 #

通过@gorhom/bottom-sheet提供的useBottomSheet Hook，直接获取第一个停靠点的高度，动态设置MapView的底部内边距：

import React, { useMemo } from 'react';
import { View, Dimensions } from 'react-native';
import MapView from 'react-native-maps';
import BottomSheet from '@gorhom/bottom-sheet';
import { useBottomSheet } from '@gorhom/bottom-sheet';

const SCREEN_HEIGHT = Dimensions.get('window').height;

export default function MapScreen() {
  const snapPoints = useMemo(() => ['25%', '70%'], []);
  const { snapPointsHeight } = useBottomSheet();

  // 取第一个停靠点的高度作为MapView的底部预留空间
  const mapBottomPadding = useMemo(() => snapPointsHeight[0] || 0, [snapPointsHeight]);

  return (
    <View style={{ flex: 1 }}>
      <MapView
        style={{
          flex: 1,
          paddingBottom: mapBottomPadding,
        }}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      />
      <BottomSheet
        snapPoints={snapPoints}
        backgroundStyle={{ backgroundColor: '#fff' }}
      >
        {/* 订单详情内容 */}
      </BottomSheet>
    </View>
  );
}

方式二：通过Sheet状态变化动态调整高度 #

监听BottomSheet的停靠点切换事件，实时计算当前Sheet高度，以此限制MapView的容器高度：

import React, { useState, useMemo } from 'react';
import { View, Dimensions } from 'react-native';
import MapView from 'react-native-maps';
import BottomSheet from '@gorhom/bottom-sheet';

const SCREEN_HEIGHT = Dimensions.get('window').height;

export default function MapScreen() {
  const snapPoints = useMemo(() => ['25%', '70%'], []);
  // 默认使用第一个停靠点高度
  const [currentSheetHeight, setCurrentSheetHeight] = useState(
    SCREEN_HEIGHT * parseFloat(snapPoints[0].replace('%', '')) / 100
  );

  return (
    <View style={{ flex: 1 }}>
      <View style={{ height: SCREEN_HEIGHT - currentSheetHeight }}>
        <MapView
          style={{ flex: 1 }}
          initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
        />
      </View>
      <BottomSheet
        snapPoints={snapPoints}
        onChange={(snapIndex) => {
          // 根据当前停靠点重新计算Sheet高度
          const heightPercent = parseFloat(snapPoints[snapIndex].replace('%', ''));
          setCurrentSheetHeight(SCREEN_HEIGHT * heightPercent / 100);
        }}
        backgroundStyle={{ backgroundColor: '#fff' }}
      >
        {/* 订单详情内容 */}
      </BottomSheet>
    </View>
  );
}

注意事项 #

• 确保BottomSheet的backgroundStyle设置为不透明背景色，避免地图从Sheet下方透出
• 如果使用固定数值的停靠点（如[200, 500]），直接用数值作为底部预留空间即可，无需百分比转换

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