android - React-native-maps 空白页面 只有谷歌标志

Question

我已经尝试为 react-native 安装 google maps 一个星期了，但仍然没有成功。我已经搜索并尝试了 react-native-maps github 问题中的解决方案，但我仍然得到一个空白页面。

我的工作:

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

在 Google 控制台 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="XXX"/>
    </application>

包.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,
  },
});

编辑:因为有人问我堆栈跟踪:Sample 1

Answer 1

您能否提供一些堆栈跟踪信息，以便我们更好地了解您的问题？你的问题描述听起来你的手机没有连接到互联网，这就是 map 没有呈现的原因。

无论如何，根据我过去的经验，这里有一些让 react-native-maps 运行的技巧。

• 首先，始终根据官方文档配置您的 Android 应用 here .
• 确保通过控制台生成了 Google Maps API key 。
• 检查您的 react-native-maps 是否与您的 react-native 版本兼容。
• 检查您的 android 构建工具版本。
• 如果您使用的是 Genymotion 的安卓模拟器(旧版本)，请确保您包含 Google Play 服务，否则 map 将无法工作。
• 有效的互联网连接。确保您的手机或模拟器已连接以便加载 map (iOS 可以在没有互联网访问的情况下使用)。
• 始终将 latlong 对象注入(inject)到 initialRegion 属性中，以便 map 知道要关注的位置。