React Native Maps初始加载标记不渲染，动态更新时偶发失效问题求助

我最近在开发一个React Native应用，用了react-native-maps和expo-location，遇到了一个特别折腾人的渲染问题，数据明明都拿到了，但地图标记就是不按预期显示，来求助大家！

核心问题现象 #

• 初始加载时：已经成功获取到用户位置和公交站点数据，控制台打印能看到stops.length > 0，所有站点坐标也都是合法数字，且肯定在初始地图区域范围内，但地图上的Marker就是不渲染。
• 触发这些操作后，Marker会立刻显示：导航离开当前页面再返回、随便改一行代码触发Expo热重载（哪怕完全没碰数据或渲染逻辑）。
• 动态场景更糟：后续要实现用户平移/缩放地图时动态获取新站点的功能，测试时发现Marker经常完全不渲染，之后又毫无规律地突然出现——但数据全程都是正常获取到的，感觉和初始加载是同一个根因。

我已经尝试过的方案（都没解决根本问题） #

• 反复确认stopLat/stopLon是合法的数字类型，且站点在初始地图可视范围内
• 给每个Marker都正确设置了key={stop.stopId}和coordinate属性
• 把Marker逻辑抽成独立组件<Markers key={hashedCode} stops={stops} />，通过更新hashedCode强制触发重渲染，没用
• 用if (!region || isLoading)先渲染加载态再显示地图，看似“解决”了初始加载的问题，但这只是临时 workaround，动态获取站点的场景还是会出现Marker失效的情况

相关代码片段 #

import React, { useEffect, useRef, useState } from 'react';
import { ActivityIndicator, Text, View } from 'react-native';
import * as Location from 'expo-location';
import MapView, { Marker, Region } from 'react-native-maps';
import { useStops } from '@/hooks/useStops';
import { styles } from '@/styles/index.styles';
import { normalizeRegion } from '@/utils/normalize-region';

export default function MapScreen() {
  const mapRef = useRef<MapView>(null);
  const [region, setRegion] = useState<Region | null>(null);

  useEffect(() => {
    (async () => {
      const { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') return;

      const loc = await Location.getCurrentPositionAsync({});
      setRegion({
        latitude: loc.coords.latitude,
        longitude: loc.coords.longitude,
        latitudeDelta: 0.01,
        longitudeDelta: 0.01,
      });
    })();
  }, []);

  const { data: stops = [], isLoading } = useStops(
    region ? normalizeRegion(region) : null,
    true,
  );

  if (!region) {
    return (
      <View style={styles.loaderContainer}>
        <Text>Loading map…</Text>
      </View>
    );
  }

  console.log(`rendering stops: ${stops.length}`);

  return (
    <View style={styles.container}>
      <MapView ref={mapRef} style={styles.map} initialRegion={region}>
        {stops.map((stop) => {
          console.log(
            `rendering ${stop.stopName}: ${stop.stopLat}, ${stop.stopLon}`,
          );
          return (
            <Marker
              key={stop.stopId}
              coordinate={{ latitude: stop.stopLat, longitude: stop.stopLon }}
              title={stop.stopName}
            />
          );
        })}
      </MapView>
      {isLoading && (
        <ActivityIndicator
          style={{ position: 'absolute', top: 16, alignSelf: 'center' }}
          size="large"
        />
      )}
    </View>
  );
}

控制台日志（证明数据已加载） #

LOG rendering stops: 0
LOG rendering stops: 83
LOG rendering Zaandam Kogerveld: 52.45686186119242, 4.8191573213796755
LOG rendering Zaandam: 52.4386277906875, 4.813996748191249
LOG rendering Wormerveer: 52.48923669646318, 4.793438907338244

环境依赖版本 #

"dependencies": {
  "@tanstack/react-query": "5.79.0",
  "expo": "53.0.9",
  "expo-location": "18.1.5",
  "react": "19.0.0",
  "react-native": "0.79.2",
  "react-native-maps": "1.20.1"
}

我感觉这是react-native-maps的渲染生命周期问题，它没有正确响应新数据的更新，但就是找不到根本原因。哪怕是 wild guess 也好，求大家给点思路！🙏

内容来源于stack exchange