React-native-maps空白页仅Google徽标 [英] React-native-maps Blank page Only google logo

问题描述

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

I've been trying to install google maps for react-native for a week an still no success. I've searched and tried the solutions in the react-native-maps github issue but still I get a blank page.

我做什么:

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->创建凭据

In Google Console APIs -> Create new Project -> Enable Google Maps Android API, Google Maps JavaScript API and Places API -> Create credentials

在AndroidManifest.xml

In AndroidManifest.xml

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

package.json

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

Because some people asked me for stack trace: Sample 1

推荐答案

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

Can you provide some stack traces so that we can have a better insight on your problem? Your problem description sounds like your phone is not connected to the internet and this is why map is not rendered.

无论如何，以下是根据我过去的经验来运行 react-native-maps 的一些提示.

Regardless, here's some tips to get react-native-maps running based on my past experiences.

• 首先，请务必根据官方文档此处.
• 确保通过控制台生成了Google Maps API密钥.
• 检查您的 react-native-maps 是否与您的 react-native 版本兼容.
• 检查您的android构建工具版本.
• 如果您使用的是Genymotion(旧版本)中的android模拟器，请确保您包含Google Play服务，否则Map无法正常工作.
• 有效的互联网连接.确保已连接手机或仿真器以加载地图(iOS很好，没有互联网访问权限).
• 总是将 latlong 对象注入 initialRegion 道具，以便地图知道要集中在哪里.

• First and foremost, always configure your Android app according to the official documentation here.
• Make sure a Google Maps API key is generated through the console.
• Check whether your react-native-maps is compatible with your react-native version.
• Check your android build-tools version.
• If you are using the android emulator from Genymotion (older version), make sure you include Google Play Services, otherwise Map will not work.
• Active internet connection. Make sure your phone or emulator is connected for the Map to load (iOS is good without internet access).
• Always inject a latlong object to the initialRegion prop so that the map knows where to focus on.

这篇关于React-native-maps空白页仅Google徽标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！