`react-native-maps` 原生不支持 web 平台，因其底层依赖 android/ios 原生地图 sdk；需为 web 端单独集成 google maps javascript api 或兼容库，实现三端（ios/android/web）统一地图功能。
在 react Native 多端项目中（尤其是同时面向 iOS、Android 和 Web），使用 react-native-maps 是常见选择——它在原生平台表现稳定、API 统一、生态成熟。但必须明确一个关键限制：react-native-maps 官方不支持 Web 平台。其源码深度绑定 Android 的 google Maps SDK 和 iOS 的 MapKit 框架，而 Web 环境中 UIManager.getViewManagerConfig 等原生桥接方法根本不存在，因此在 Web 打包时会直接抛出 Uncaught TypeError: react_native_1.UIManager.getViewManagerConfig is not a function 错误。
✅ 正确的跨平台地图架构策略
推荐采用 “平台条件分离 + Web 专用降级” 方案：
-
保留 react-native-maps 用于 iOS/Android
在原生端继续使用标准写法（无需修改）：// MapScreen.tsx (iOS/Android only) import MapView, { PROVIDER_GOOGLE, Marker } from 'react-native-maps'; export default function MapScreen() { return ( -
Web 端切换为 @googlemaps/react 或 @react-google-maps/api
安装 Web 专用地图库（推荐更轻量、typescript 友好的 @googlemaps/react）：npm install @googlemaps/react # 或（若需更多高级组件） # npm install @react-google-maps/api创建 Web 专属地图组件（如 MapWeb.tsx）：
// components/MapWeb.tsx import { Map, AdvancedMarker, Pin } from '@googlemaps/react'; export default function MapWeb() { return ( ); } -
按平台动态导入组件（关键！）
在 MapScreen.tsx 中使用 Platform.OS 进行条件渲染，避免 Web 打包时解析原生模块：// MapScreen.tsx —— 统一入口，自动适配平台 import { Platform } from 'react-native'; if (Platform.OS === 'web') { // Web 端：导入纯 js 地图组件 export { default as MapScreen } from './components/MapWeb'; } else { // iOS/Android：导入原生地图组件 export { default as MapScreen } from './screens/MapScreen.native'; }✅ 注意：将原生实现重命名为 MapScreen.native.tsx，Web 实现命名为 MapScreen.web.tsx，并配合 platform-specific extensions（react native 自动识别 .native/.web 后缀），可彻底规避 Web 构建时加载原生模块的问题。
⚠️ 重要注意事项
- Google Maps API Key 必须配置：Web 端需在 Google Cloud Console 启用 Maps javaScript API，并添加合法的 http referrers（如 localhost:*, yourdomain.com/*）。
- 样式与交互一致性：@googlemaps/react 的组件结构、事件名（如 onBoundsChanged vs onRegionChange）与 react-native-maps 不同，建议封装统一 Hook（如 useMapEvents()）抽象差异。
- 性能优化：Web 端避免在 ScrollView 中嵌套全屏地图；建议使用 flex: 1 布局，并确保父容器有明确高度。
- 热更新兼容性：若使用 Expo，可考虑 expo-location + expo-web-browser 配合
加载嵌入式 Google Maps（适合简单场景），但交互能力受限。
✅ 总结
react-native-maps 是优秀的原生地图解决方案，但绝非“Write Once, Run Anywhere”。真正的跨平台地图体验，需要主动分层设计：原生端坚守 react-native-maps，Web 端拥抱 @googlemaps/react 或 @react-google-maps/api，并通过平台条件导入或文件后缀机制实现零冲突共存。这样既保障了 iOS/Android 的高性能与原生体验，又让 Web 用户获得符合现代浏览器标准的地图服务——这才是 React Native 全平台开发的务实之道。