React-native-maps空白页仅Google徽标

Question

我一直在尝试将Google Maps安装为react-native一周，但仍然没有成功。我已经搜索并尝试了react-native-maps github问题中的解决方案，但仍然出现空白页。

我所做的：

react-native init myapp
npm install
yarn add react-native-maps
react-native link react-native-maps

在Google Console API中->创建新项目->启用Google Maps Android API，Google Maps JavaScript API和Places API->创建凭据

在AndroidManifest.xml中

    <application>
....
       <meta-data
          android:name="com.google.android.geo.API_KEY"
          android:value="AIzaSyDRK50sPCRCPLTnyt0OUdng9cwP0eqPJq4"/>
    </application>

package.json

    {
    "name": "maps",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
    },
    "dependencies": {
        "react": "16.0.0",
        "react-native": "0.50.4",
        "react-native-maps": "^0.18.3"
    },
    "devDependencies": {
        "babel-jest": "21.2.0",
        "babel-preset-react-native": "4.0.0",
        "jest": "21.2.1",
        "react-test-renderer": "16.0.0"
    },
    "jest": {
        "preset": "react-native"
    }
}

App.js

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

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
      <MapView
        style={styles.map}
        region={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.015,
          longitudeDelta: 0.0121,
        }}
      >
      </MapView>  
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

编辑：因为有人问我堆栈跟踪：示例1

Answer 1

给那些拥有带有Google 徽标的空白地图视图的朋友的建议。我花了一整天的时间来解决这个问题。最后我意识到，地图实际上可以工作，但在第一次运行时完全缩放。我以为它是空白页，但实际上它是空白区域 :) 仅供参考

Answer 2

确保您在 Google Console 中启用 API 密钥以使用Maps SDK for Android，如果您想为 iOS 启用Maps SDK for iOS

Answer 3

您能否提供一些堆栈跟踪信息，以便我们对您的问题有更好的了解？您的问题描述听起来像您的手机未连接到互联网，这就是为什么未渲染地图的原因。

无论如何，以下是react-native-maps根据我过去的经验开始跑步的一些技巧。

• 首先，请始终根据此处的官方文档配置您的Android应用。
• 确保通过控制台生成了Google Maps API密钥。
• 检查react-native-maps您的react-native版本是否兼容。
• 检查您的android build-tools版本。
• 如果您使用的是Genymotion（较旧版本）的android模拟器，请确保您包含Google Play服务，否则Map无法正常工作。
• 活跃的互联网连接。确保已连接手机或仿真器以加载地图（iOS很好，没有互联网访问权限）。
• 始终将latlong物体注入initialRegion道具，以便地图知道要聚焦的位置。

Answer 4

我花了一整天时间尝试谷歌提供的解决方案，但似乎遗留元数据对我不起作用，所以我改变了下面的行 AndroidManifest.xml

<meta-data
 android:name="com.google.android.geo.API_KEY"
 android:value="Your Google maps API Key Here"/>

到

<meta-data
    android:name="com.google.android.maps.v2.API_KEY"
    android:value="Your Google maps API Key Here"/>

最后地图出现了。

当然Maps SDK for Android必须在Google Api Console 中启用。以下是Maps SDK for Android为初学者启用的步骤：

1. 转到Google Api 控制台。

2. 在屏幕的左上角，就在Google Apis徽标的右侧，您会看到您的项目名称，选择正确的项目名称，然后在项目名称下方，您会看到一个蓝色文本+ ENABLE APIS AND SERVICES。点击它。

3. 在打开的网页中，向下滚动以找到Maps SDK for Android。单击以启用它。