如何在Xcode模拟器中对react-native-maps执行地图缩小操作？

react-native-maps 原生默认仅将双击手势绑定了放大逻辑，未内置双击缩小的对应处理，需要自行调整配置或自定义手势实现，以下是可直接落地的实现方案：

方案1：自定义双击手势实现缩放切换 #

该方案可以自定义触发缩小的交互逻辑，适配鼠标操作场景，需要配合react-native-gesture-handler实现：

1. 先关闭地图原生默认的双击放大配置，避免手势冲突：在MapView组件上设置 doubleTapZoomEnabled={false}，该配置为必选项
2. 绑定自定义双击手势，支持通过Ctrl+双击触发缩小，普通双击保留放大逻辑，完整代码示例如下：

import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
import { TapGesture, GestureDetector } from 'react-native-gesture-handler';
import { useRef } from 'react';

const MapScreen = () => {
  const mapRef = useRef(null);

  // 双击手势处理逻辑
  const doubleTapGesture = TapGesture()
    .numberOfTaps(2)
    .onEnd(async (event) => {
      // 实时获取当前地图相机参数
      const camera = await mapRef.current.getCamera();
      if (event.ctrlKey) {
        // 按住Ctrl双击时执行缩小，限制最小缩放级别为1
        camera.zoom = Math.max(camera.zoom - 1, 1);
      } else {
        // 普通双击执行放大，限制最大缩放级别为20
        camera.zoom = Math.min(camera.zoom + 1, 20);
      }
      // 执行缩放动画，时长300ms和原生动画保持一致
      mapRef.current.animateCamera(camera, { duration: 300 });
    });

  return (
    <GestureDetector gesture={doubleTapGesture}>
      <MapView
        ref={mapRef}
        provider={PROVIDER_GOOGLE}
        style={{ flex: 1 }}
        doubleTapZoomEnabled={false} // 关闭原生双击放大，必须配置
        zoomEnabled={true}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      />
    </GestureDetector>
  );
};

export default MapScreen;

如果不需要Ctrl键区分，也可以直接根据当前缩放值切换逻辑：当前缩放大于初始值时双击缩小，否则双击放大。

方案2：启用原生缩放控制按钮 #

如果不需要自定义双击交互，可直接开启地图原生自带的缩放控制按钮，鼠标点击加减号即可实现放大缩小，仅需在MapView组件上添加配置：
zoomControlEnabled={true}
该方案无需额外编码，适配PC端鼠标操作场景。

补充说明 #

• react-native-maps 默认支持鼠标滚轮缩放，无需额外配置即可通过滚动滚轮实现缩放操作
• 若自定义手势不生效，检查react-native-gesture-handler是否已经完成对应端的原生集成，且GestureDetector正确包裹了MapView组件

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