react-native-maps <Marker /> 组件不显示问题求助

问题背景 #

使用 React Native 0.80.1 + react-native-maps 1.21.0（禁用新架构），地图上默认 Marker 及自定义 Marker（基于 Image/View 实现）均无法显示，相关代码如下：

import MapView, {Marker, PROVIDER_GOOGLE} from 'react-native-maps';

// 其他代码部分

return(
  <View style={{ flex: 1, backgroundColor: '#0000' }}>
    <MapView
      ref={mapRef}
      style={StyleSheet.absoluteFillObject}
      provider={PROVIDER_GOOGLE}
      initialRegion={{
        latitude: 20.5937,
        longitude: 78.9629,
        latitudeDelta: 40,
        longitudeDelta: 40,
      }}
      onMapReady={() => {
        console.log('---MAP_READY---', agentLoc);
        if (agentLoc?.latitude && agentLoc?.longitude) {
          setTimeout(() => animateTo(agentLoc, 'READY_TO_AGENT'), 200);
        }
      }}
      onLayout={() => {
        console.log('---MAP_LAYOUT---', agentLoc);
        if (agentLoc?.latitude && agentLoc?.longitude) {
          setTimeout(() => animateTo(agentLoc, 'LAYOUT_TO_AGENT'), 200);
        }
      }}
    >
      {agentLoc && (
        <Marker
          identifier="agent"
          coordinate={{ latitude: Number(agentLoc.latitude), longitude: Number(agentLoc.longitude) }}
          title="Agent"
          pinColor="tomato"
        />
      )} 
    </MapView>
  </View>
)

排查与解决步骤 #

• 修正 import 语法错误：原代码的 import 语句缺少逗号，正确写法为 import MapView, {Marker, PROVIDER_GOOGLE} from 'react-native-maps';，语法错误会导致组件未正确引入。
• 验证坐标数据有效性：确认 agentLoc.latitude 和 agentLoc.longitude 是可转换为有效数字的值。可添加日志排查：

  console.log('转换后坐标:', Number(agentLoc.latitude), Number(agentLoc.longitude));
  

  若转换结果为 NaN，需检查数据源的正确性。
• 修复容器样式问题：外层 View 的 backgroundColor: '#0000' 是无效颜色值，建议改为 backgroundColor: 'transparent' 或直接移除该样式，避免渲染层级异常。
• 切换地图 Provider 测试：暂时移除 provider={PROVIDER_GOOGLE}，使用默认 Provider（iOS 为 MapKit，Android 为 Google Maps Android API），排查是否为 Google 地图 Provider 的配置问题。
• 检查平台配置完整性：
  • Android：确认 AndroidManifest.xml 已添加 Google Maps API 密钥，以及必要权限（如 ACCESS_FINE_LOCATION）。
  • iOS：确认 Info.plist 已添加 Google Maps API 密钥，以及 NSLocationWhenInUseUsageDescription 权限描述。
• 测试静态 Marker：替换动态坐标为固定值，验证 Marker 本身是否能正常渲染：

  <Marker
    identifier="test"
    coordinate={{ latitude: 20.5937, longitude: 78.9629 }}
    title="Test Marker"
    pinColor="tomato"
  />
  

• 确认数据加载时机：使用 useEffect 监听 agentLoc 变化，确保数据加载完成后再渲染 Marker，避免初始渲染时数据未就绪。
• 清理缓存并重建项目：执行 npm start -- --reset-cache 清除 Metro 缓存，然后重新编译：
  • Android：运行 ./gradlew clean && ./gradlew assembleDebug
  • iOS：运行 pod install && xcodebuild clean build

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