React Native集成Google Maps时地图渲染灰屏问题如何解决？

解决方案 #

首先解决secrets-gradle-plugin报错问题，再依次排查地图灰屏问题：

1. 修复secrets插件报错 #

你遇到的插件报错大概率是Gradle版本和插件版本不兼容导致的：secrets-gradle-plugin 1.3.0要求项目Gradle版本最低为7.0，如果你的项目Gradle版本低于7.0就会触发报错。
你可以直接先移除该插件的相关配置，它不是接入Google Maps的必须项，避免额外冲突。

2. 统一API Key配置，消除冲突 #

你现在同时配置了3种API Key读取方式，会互相覆盖导致密钥读取失败：

• 删去app/build.gradle中defaultConfig下的manifestPlaceholders = [MAPS_API_KEY: "$System.env.MAPS_API_KEY"]配置
• 将AndroidManifest.xml中API Key配置的${MAPS_API_KEY}替换为@string/google_maps_key，直接读取你已经写好的google_maps_api.xml中的密钥即可

3. 修复Google Play服务版本冲突 #

根目录build.gradle的ext块中同时定义了playServicesVersion = "17.0.0"和googlePlayServicesVersion = "11.8.0"，两个版本号冲突会导致依赖加载异常：

• 删去googlePlayServicesVersion = "11.8.0"这一行，统一版本号和你app/build.gradle中依赖的17.0.1保持一致即可

4. 检查Google Cloud控制台配置 #

90%的灰屏问题都来自云端配置错误，请逐一核对：

• 确认你已经在Google Cloud控制台开启了Maps SDK for Android服务，未开启该服务即使密钥正确也无法加载地图
• 确认你的API Key没有应用限制，或者如果设置了Android应用限制，必须正确填写你应用的包名、debug和release两套SHA1签名指纹
• 确认API Key没有配额耗尽

5. 权限与网络检查 #

• 安卓6.0及以上系统需要动态申请定位权限，你可以先手动到应用设置中开启定位权限，再重启应用测试
• 测试设备需要可以正常访问Google服务，国内网络环境需要使用全局代理

6. 清理缓存重试 #

所有配置修改完成后，按以下步骤重新打包：

1. 删除安卓项目根目录的build文件夹和app/build文件夹
2. 在安卓项目根目录执行./gradlew clean清理构建缓存
3. 卸载设备上已安装的旧版应用，重新打包安装运行

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