地图使用 React Native 呈现灰色

Question

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

我的代码：

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"
    }
}

我的app/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'
}

我收到了这个错误：

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

Answer 1

您需要在 app/build.gradle 上将插件部分更改为以下内容：

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

apply plugin: "com.google.secrets_gradle_plugin"

地图使用 React Native 呈现灰色

Map is rendering gray using react native

android

google-maps

react-native