react-native-maps首次点击地图时Marker不渲染，需二次交互才显示的问题求助（Expo SDK 53、RN 0.79.5、react-native-maps 1.20.1）

最近在用react-native-maps开发动态添加标记的功能时，遇到了一个很头疼的问题：当我点击地图设置principalMarker（那个代表最新点击位置的绿色标记）后，这个标记并不会立刻显示出来，必须要做一次后续交互——比如缩放地图、平移地图、再次点击地图，甚至打开FAB菜单都行——它才会突然正常渲染出来。感觉第一次的渲染触发被忽略了，得靠额外操作逼它重渲染才行。

环境版本 #

• Expo SDK: ~53.0.20
• React Native: 0.79.5
• react-native-maps: 1.20.1

核心代码片段 #

状态与事件处理

import { useState } from 'react';
import { MapView, MapPressEvent, LatLng, Marker } from 'react-native-maps';

// 自定义类型定义
interface EditablePoint extends LatLng {
  id: string;
}

const [markersOnEdit, setMarkersOnEdit] = useState<EditablePoint[]>([]);
const [principalMarker, setPrincipalMarker] = useState<LatLng | null>(null);

// 地图点击事件：设置主标记
const handleMapPress = (event: MapPressEvent) => {
  setPrincipalMarker({
    latitude: event.nativeEvent.coordinate.latitude,
    longitude: event.nativeEvent.coordinate.longitude,
  });
};

// 添加新标记到编辑列表
const addNewMarker = () => {
  if (!principalMarker) return;

  // 去重判断（避免添加坐标几乎相同的标记）
  const epsilon = 0.00001;
  const alreadyExists = markersOnEdit.some(
    (m) => 
      Math.abs(m.latitude - principalMarker.latitude) < epsilon && 
      Math.abs(m.longitude - principalMarker.longitude) < epsilon
  );

  if (alreadyExists) {
    // 尝试强制触发重渲染的操作
    setMarkersOnEdit((prev) => [...prev]);
    setPrincipalMarker({ ...principalMarker });
    return;
  }

  const newMarker: EditablePoint = {
    id: generateId(), // 自定义的ID生成函数
    latitude: principalMarker.latitude,
    longitude: principalMarker.longitude,
  };
  setMarkersOnEdit((prev) => [...prev, newMarker]);
  setPrincipalMarker(null);
};

地图与标记渲染

<MapView
  ref={mapRef}
  style={StyleSheet.absoluteFill}
  showsUserLocation
  showsCompass
  onPress={handleMapPress}
  initialRegion={{
    latitude: location.coords.latitude,
    longitude: location.coords.longitude,
    latitudeDelta: 0.005,
    longitudeDelta: 0.005,
  }}
  onRegionChangeComplete={handleRegionChangeComplete}
>
  <UrlTile
    tileSize={512}
    urlTemplate="..." // 自定义瓦片地址
    maximumZ={19}
    flipY={false}
    zIndex={0}
  />

  {/* 主标记（绿色，点击地图后显示） */}
  {principalMarker !== null && (
    <Marker
      identifier="principalMarker"
      coordinate={{ ...principalMarker }}
      pinColor="green"
      draggable
      onDrag={handleMarkerDrag} // 自定义的拖拽处理函数
    />
  )}

  {/* 已添加的编辑标记（红色） */}
  {markersOnEdit.map((point) => (
    <Marker
      key={point.id}
      coordinate={point}
      pinColor="red"
    />
  ))}
</MapView>

已尝试的解决方法 #

• 用console.log确认了principalMarker的状态确实更新了，坐标值完全正确
• 试过通过展开现有state的方式强制触发重渲染（比如setPrincipalMarker({...principalMarker})、setMarkersOnEdit(prev => [...prev])）
• 试过用setTimeout(() => setPrincipalMarker(...), 0)延迟更新state
• 试过调用mapRef.current?.forceUpdate()强制地图组件更新
• 排查了是否存在重复添加相同坐标标记的情况，去重后也尝试了强制更新state的操作

想请教的问题 #

1. 这是react-native-maps 1.20.1的bug，还是React 19/Expo SDK 53的特性导致的渲染延迟？
2. 有没有已知的workaround可以让主标记在首次点击地图后立刻渲染出来？
3. 有没有其他开发者遇到过类似问题，找到靠谱的修复方法了吗？

提前谢谢大家的帮忙 🙏

内容来源于stack exchange