react-native-maps iOS端Marker数组不渲染问题求助

针对你遇到的Android正常渲染Marker数组、iOS仅单个Marker显示，且Expo开发环境正常但TestFlight发布后失效的问题，结合react-native-maps 1.3.2 + Expo 47.0.0的版本特性，给出以下排查和解决步骤：

1. 替换不稳定的key值 #

当前用index作为Marker的key，在数组元素增删或顺序变化时，React会错误复用组件，这在iOS的优化渲染环境下容易导致Marker不显示。换成每个Marker的唯一标识（比如m.item.id）：

{markers?.map((m) => {
  return (
    <Marker
      key={m.item.id} // 用数据唯一ID替代index
      coordinate={m.coordinate}
      onPress={m.onPress}
      tracksViewChanges={!mapReady}
      image={
        selectedStation?.id === m.item.id
          ? petrol_on
          : m.homeStation
          ? petrol_home
          : petrol_off
      }
    />
  );
})}

2. 简化tracksViewChanges逻辑 #

tracksViewChanges配合1秒延迟的mapReady状态，在TestFlight的生产打包环境下可能触发渲染抑制。静态Marker不需要追踪视图变化，直接设置为false：

<Marker
  key={m.item.id}
  coordinate={m.coordinate}
  onPress={m.onPress}
  tracksViewChanges={false} // 直接禁用视图变化追踪
  image={...}
/>

同时可以移除setTimeout的延迟，直接在onMapReady里设置setMapReady(true)。

3. 检查Marker图片资源的打包兼容性 #

Expo开发环境和TestFlight打包的资源处理逻辑有差异，图片资源问题是TestFlight特有的常见坑：

• 确保所有Marker图片用require静态引入，避免动态拼接路径
• 优先使用PNG格式图片，避免WebP等在iOS生产环境可能有兼容问题的格式
• 临时替换为测试图片验证是否是资源问题：

image={require('../assets/test-marker.png')} // 用本地PNG测试图替代现有图标

4. 切换地图Provider测试 #

Google Maps Provider在TestFlight环境下可能有额外的渲染优化，尝试切换回Apple Maps（移除provider={PROVIDER_GOOGLE}）：

<MapView
  ref={mapRef}
  onMapReady={() => setMapReady(true)}
  style={style}
  initialRegion={{...location, latitudeDelta: 0.0922, longitudeDelta: 0.0421}}
  showsUserLocation
  showsMyLocationButton={false}
  // 注释掉provider配置，使用默认Apple Maps
  customMapStyle={...}
>

5. 强制MapView重渲染 #

当markers数组变化时，给MapView添加动态key触发整体重渲染，避免iOS端的渲染缓存问题：

<MapView
  key={`map-${markers?.length}-${JSON.stringify(markers?.map(m => m.item.id))}`}
  // 其他属性保持不变
>

内容的提问来源于stack exchange，提问作者Stijn van de Donk