react-native-maps 原生不支持 web 平台，因其底层依赖 ios mapkit 和 android google maps sdk；在 web 环境中需切换为基于 `@googlemaps/react` 或 `google-map-react` 的 web 专用地图实现，并通过平台条件渲染确保跨端一致性。
在 React Native 多端（iOS、Android、Web）项目中，react-native-maps 是一个广受欢迎的地图组件库——但它官方明确不支持 Web 平台。错误信息 UIManager.getViewManagerConfig is not a function 正是典型表现：该 API 仅存在于 React Native 原生运行时（iOS/Android），而 Web 端由 Webpack + React DOM 驱动，无原生 UIManager 模块，因此加载 react-native-maps 时立即崩溃。
✅ 正确的跨平台地图策略是：按平台动态选择地图实现
- iOS / Android → 继续使用 react-native-maps（保持原生性能与功能）
- Web → 替换为轻量、TypeScript 友好、React-first 的 Web 地图库，推荐以下任一方案：
✅ 推荐方案：@googlemaps/react（官方维护，现代 API）
npm install @googlemaps/react # 注意：需在 index.html 中提前加载 Google Maps JavaScript API
在 public/index.html
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization" async ></script>
然后在 MapScreen.web.tsx（或统一入口中做平台判断）中封装适配层：
// components/PlatformMapView.tsx
import { Platform } from 'react-native';
if (Platform.OS === 'web') {
// Web: 使用 @googlemaps/react
export const MapView = ({
initialRegion,
children,
onRegionChangeComplete,
}: {
initialRegion: { latitude: number; longitude: number; latitudeDelta: number; longitudeDelta: number };
children?: React.ReactNode;
onRegionChangeComplete?: (region: any) => void;
}) => {
const { latitude, longitude } = initialRegion;
return (
<GoogleMap
zoom={14}
center={{ lat: latitude, lng: longitude }}
mapContainerStyle={{ width: '100%', height: '100%' }}
onCenterChanged={() => {
// 模拟 region change（需结合 useMap hook 获取当前视图）
}}
>
{children}
</GoogleMap>
);
};
export const Marker = ({ coordinate, title }: { coordinate: { latitude: number; longitude: number }; title?: string }) => (
<AdvancedMarker position={coordinate} title={title} />
);
export const HeatmapLayer = ({ points }: { points: { location: { lat: number; lng: number }; weight?: number }[] }) => (
<HeatmapLayerFusion data={points} />
);
} else {
// Native: 原样导出 react-native-maps
import MapViewNative, { Marker as MarkerNative, Heatmap as HeatmapNative } from 'react-native-maps';
export const MapView = MapViewNative;
export const Marker = MarkerNative;
export const Heatmap = HeatmapNative;
}⚠️ 关键注意事项
- API Key 必须启用对应服务：在 Google Cloud Console 启用 Maps JavaScript API 和 Geocoding API（如需地址解析），并设置 HTTP 引用白名单（本地开发可设为 http://localhost:*）。
- 避免混用模块：切勿在 .web.tsx 文件中 import 'react-native-maps' —— 即使被 if (Platform.OS !== 'web') 包裹，Webpack 仍会尝试解析导致构建失败。
- 类型一致性建议：为统一开发体验，可定义共享的 Coordinate、Region 类型接口，在各平台实现中桥接转换。
- 热重载兼容性：若使用 Expo Web，优先考虑 expo-location + expo-web-browser 配合 react-google-maps-api（社区成熟度更高）。
✅ 最终效果：一份代码，三端运行
// MapScreen.tsx（统一入口，无需 .web/.native 后缀）
import { MapView, Marker } from '../components/PlatformMapView';
export default function MapScreen() {
return (
<MapView initialRegion={{ latitude: 37.7749, longitude: -122.4194, latitudeDelta: 0.0922, longitudeDelta: 0.0421 }}>
<Marker coordinate={{ latitude: 37.7749, longitude: -122.4194 }} title="San Francisco" />
</MapView>
);
}通过平台抽象 + 条件导出，你既能保留 react-native-maps 在移动端的高性能与完整能力，又能让 Web 版本稳定运行于浏览器——真正实现「Write once, run anywhere」的跨端承诺。
