如何在React Native（Expo环境）中实现兼容Web、安卓、iOS的谷歌地图

不需要 eject 项目，仅通过平台文件拆分就可以实现三端统一调用，具体操作如下：

1. 安装依赖 #

直接安装两个对应端的地图库，Expo 环境下无需额外原生配置：

npm install react-native-maps react-native-web-maps
# 或使用 yarn
yarn add react-native-maps react-native-web-maps

2. 封装统一入口组件 #

利用 React Native 打包器的平台文件识别规则，创建两个同名不同后缀的组件文件，打包时会自动根据运行平台加载对应文件：

• 创建MapView.jsx（或.tsx），用于 Android、iOS 端：

// 直接导出原生端的地图组件
export { default, Marker } from 'react-native-maps';

• 创建MapView.web.jsx（或.tsx），用于 Web 端：

// 直接导出Web端的地图组件
export { default, Marker } from 'react-native-web-maps';

3. 业务代码统一调用 #

所有业务场景下直接引入你封装的MapView组件即可，两个库的核心API完全对齐，无需额外做平台判断：

import MapView from './MapView';

const AppMap = () => {
  return (
    <MapView
      style={{flex: 1}}
      initialRegion={{
        latitude: 30.2741,
        longitude: 120.1551,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
    >
      <MapView.Marker
        coordinate={{latitude: 30.2741, longitude: 120.1551}}
        title="杭州"
      />
    </MapView>
  )
}

export default AppMap;

特殊场景处理 #

如果用到两个库存在差异的小众API，可以通过Platform.OS做少量兼容即可，90%以上的常用地图功能不需要额外适配。

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