在Expo中无法使用@teovilla/react-native-web-maps的问题求助

1. 平台专属组件实现（适配Expo Router的最优方案） #

利用Expo自动识别平台后缀文件的特性，创建以下三个组件文件：

① Map.native.tsx（原生端iOS/Android） #

import MapView from 'react-native-maps';
import React from 'react';

const Map = (props) => {
  return <MapView {...props} style={{ flex: 1 }} />;
};

export default Map;

② Map.web.tsx（Web端） #

import MapView from '@teovilla/react-native-web-maps';
import React from 'react';

const Map = (props) => {
  // 必须传入谷歌地图API密钥，否则Web端地图无法加载
  return <MapView {...props} googleMapsApiKey="你的谷歌地图API密钥" style={{ flex: 1 }} />;
};

export default Map;

③ Map.tsx（统一入口） #

// Expo会自动根据当前平台加载对应后缀的组件
import Map from './Map.native';
export default Map;

在项目中直接导入该组件使用即可：

import Map from './path/to/Map';

const MapScreen = () => {
  return (
    <View style={{ flex: 1 }}>
      <Map 
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }} 
      />
    </View>
  );
};

2. 关键配置补充 #

原生端权限与插件配置 #

在app.json的expo字段内添加react-native-maps的必要配置：

{
  "expo": {
    // ...其他原有配置
    "ios": {
      "infoPlist": {
        "NSLocationWhenInUseUsageDescription": "需要访问你的位置以显示地图"
      }
    },
    "android": {
      "permissions": ["ACCESS_FINE_LOCATION", "ACCESS_COARSE_LOCATION"]
    },
    "plugins": [
      [
        "react-native-maps",
        {
          "apiKey": "你的谷歌地图原生API密钥"
        }
      ]
    ]
  }
}

Web端注意事项 #

• 确保谷歌地图API密钥已启用Maps JavaScript API，并将你的Web域名添加到API密钥的允许访问列表中
• 若需使用其他地图服务商（如高德、百度），需替换@teovilla/react-native-web-maps的底层依赖，该库默认基于谷歌地图实现

3. 过往问题排查 #

• Web端地图不显示：核心原因是未传入googleMapsApiKey，或API密钥未配置正确的权限/域名白名单
• 手动修改webpack/metro失败：Expo Router项目无需手动修改打包工具配置，平台后缀组件方案是官方推荐的跨平台组件拆分方式，无需额外调整打包规则

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