You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React Native Expo集成Google Maps iOS端显示空白求助

Expo开发React Native集成Google Maps空白问题

我使用Expo开发React Native应用,尝试在首页集成Google Maps,但地图无法加载,仅显示空白白屏。以下是相关代码与配置:

代码实现

import React from 'react';
import { StyleSheet } from 'react-native';
import MapView, { Marker, PROVIDER_GOOGLE } from 'react-native-maps';

export default function HomeScreen() {
  return (
    <MapView
      provider={PROVIDER_GOOGLE}
      style={StyleSheet.absoluteFill}
      initialRegion={{
        latitude: 41.0082,
        longitude: 28.9784,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
    >
      <Marker coordinate={{ latitude: 41.0082, longitude: 28.9784 }} />
    </MapView>
  );
}

app.json配置

"ios": {
  "googleServicesFile": "./GoogleService-Info.plist",
  "supportsTablet": true,
  "bundleIdentifier": "com.xxx.xxx.xxx",
  "config": {
    "googleMapsApiKey": "XXX"
  }
},

已执行的操作

  • 在app.json的ios.config下添加googleMapsApiKey
  • 确保MapView中使用PROVIDER_GOOGLE
  • 应用已获取位置访问权限
  • 验证API密钥在Google Cloud Console中启用了Google Maps SDK for iOS

尽管执行了这些步骤,地图仍显示空白。

已尝试的方案

  • 确认googleMapsApiKey有效且无限制
  • 检查Google Cloud Console中已启用Google Maps SDK for iOS
  • 使用expo start -c清理Expo缓存
  • 重建应用并在iOS真机及模拟器测试

疑问

  • 是否遗漏了Expo iOS端Google Maps的配置?
  • 使用Expo是否需要额外的原生依赖或步骤?
  • Expo处理googleMapsApiKey或权限是否存在问题?

API密钥限制
空白地图视图

内容的提问来源于stack exchange,提问作者Bertug

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.15 11:36:05