地图使用本机反应呈现灰色答案

【问题标题】：Map is rendering gray using react native地图使用本机反应呈现灰色
【发布时间】：2021-11-20 00:37:35
【问题描述】：

我正在使用 React Native 做一个项目，我想使用 Google Maps API 放置地图。但是我遇到了一个问题，即图像没有显示任何内容（它是灰色的）。我查看了 Stackoverflow 上的几篇帖子，但我无法解决我的问题。

我的代码：

import React from 'react';
import MapView, {PROVIDER_GOOGLE} from 'react-native-maps';
import {StyleSheet, View} from 'react-native'; // remove PROVIDER_GOOGLE import if not using Google Maps

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: 400,
    width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

export default () => (
  <View style={styles.container}>
    <MapView
      provider={PROVIDER_GOOGLE} // remove if not using Google Maps
      style={styles.map}
      initialRegion={{
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.015,
        longitudeDelta: 0.0121,
      }}
    />
  </View>
);

在我的 local.properties 文件中（在 android 的根目录中）我输入了我的凭据（出于测试目的，它不受限制）

MAPS_API_KEY=AIza...

我的 build.gradle 文件（在 android 根目录中）

buildscript {
    ext {
        buildToolsVersion = "29.0.3"
        playServicesVersion = "17.0.0"
        googlePlayServicesVersion = "11.8.0"
        androidMapsUtilsVersion = "0.5+"
    }
    dependencies {
        classpath "com.google.android.libraries.mapsplatform.secrets-gradle-plugin:secrets-gradle-plugin:1.3.0"
    }
}

我的应用程序/build.gradle：

android {
    defaultConfig {
        manifestPlaceholders = [MAPS_API_KEY: "$System.env.MAPS_API_KEY"]
    }
}

dependencies {
    implementation(project(':react-native-maps')){
       exclude group: 'com.google.android.gms', module: 'play-services-base'
       exclude group: 'com.google.android.gms', module: 'play-services-maps'
    }

    implementation 'com.google.android.gms:play-services-base:17.2.1'
    implementation 'com.google.android.gms:play-services-maps:17.0.1'
}

我的 AndroidManifest.xml

<manifest ...>
  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
  <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />

  <application ...>
    <uses-library android:name="org.apache.http.legacy"
                  android:required="false" />

    <meta-data android:name="com.google.android.gms.version"
               android:value="@integer/google_play_services_version" />

    <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="${MAPS_API_KEY}" />
  </application>
</manifest>

我创建了 app/src/main/res/values/google_maps_api.xml

<resources>
    <string name="google_maps_key" templateMergeStrategy="preserve" translatable="false">AIza...</string>
</resources>

我尝试在 app/build.gradle 上添加这一行

plugins {
   id 'com.google.android.libraries.mapsplatform.secrets-gradle-plugin'
}

我得到了这个错误：

但我的主要问题是第一张图片没有显示地图（或显示为灰色）。

【问题讨论】：

标签： android react-native google-maps

【解决方案1】：

你需要在app/build.gradle上将插件部分改成如下：

buildscript {
    dependencies {
         classpath "com.google:plugin:0.6.1"
    }
}

apply plugin: "com.google.secrets_gradle_plugin"

【讨论】：