世博谷歌地图灰色区域android模拟器

我对

React native

非常陌生。我使用

expo

创建我的应用程序。我想在我的

iso

和

android

模拟器中呈现谷歌地图。我已为该应用程序安装了

react native maps

软件包。我添加了我的

googleapi

expo的

app.json

。但问题是，地图在Android emulator中显示为灰色，但在iso emulator中可以工作。我不知道，怎么修

这是我的app.json文件

{
  "expo": {
    "name": "first app",
    "slug": "first-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "web": {
      "favicon": "./assets/favicon.png"
    }
  },
  "android": {
    "config": {
      "googleMaps": {
        "apiKey": "AIzaSyCdPV0....."
      }
    }
  },
  "ios": {
    "config": {
      "googleMaps": {
        "apiKey": "AIzaSyCdPV0....."
      }
    }
  }
}

这是我的地图组件

import React from 'react';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
import { StyleSheet, Text, View, Dimensions } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <MapView
          provider={PROVIDER_GOOGLE}
          initialRegion={{
            latitude: 60.1098678,
            longitude: 24.7385084,
            latitudeDelta: 0.2,
            longitudeDelta: 1,
          }}
          style={styles.mapStyle} />
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  mapStyle: {
    width: 400,
    height: 400,
  },
});

从“React”导入React；
从“react native maps”导入MapView，{PROVIDER_GOOGLE}；
从“react native”导入{样式表、文本、视图、维度}；
导出默认类App扩展React.Component{
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
地图样式：{
宽度：400，
身高：400，
},
});