使用Expo SDK 46搭配react-native-maps时地图渲染空白问题求助

核心排查方向与解决方案 #

1. 版本兼容性适配 #

你的项目使用社区版react-native-maps@0.31.1，在Expo SDK 46（对应react-native 0.69.4）的managed workflow环境下易出现配置冲突，建议替换为Expo官方维护的expo-maps：

• 执行卸载与安装命令：

  npm uninstall react-native-maps
  npm install expo-maps@~10.3.0
  

• 修改组件导入语句：将import MapView from 'react-native-maps'替换为import MapView from 'expo-maps'

2. 确认API密钥配置正确性 #

Expo环境下需在app.json或app.config.js的expo字段内配置密钥，注意Android与iOS的字段差异：

{
  "expo": {
    // ...其他配置
    "android": {
      "config": {
        "googleMaps": {
          "apiKey": "你的Google API密钥"
        }
      }
    },
    "ios": {
      "config": {
        "googleMapsApiKey": "你的Google API密钥"
      }
    }
  }
}

3. 检查API密钥权限与限制 #

• 确保已启用Maps SDK for Android、Maps SDK for iOS（若用到地址解析需额外启用Geocoding API）；
• 检查密钥的应用限制：开发模式下Expo默认包名为host.exp.exponent，需将其添加到密钥允许列表，或暂时移除限制测试。

4. 清理Expo缓存 #

执行命令清除旧配置缓存：

expo r -c

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