问题描述

我一直在尝试关注这个 https://github.com/airbnb/react-native-maps 教程我尝试了他们所说的一切，但在我的 android studio 模拟器上出现了空白屏幕.

I have been trying to follow this https://github.com/airbnb/react-native-maps tutorial I tried everything they said but getting a blank screen on my emulator of android studio.

我的代码:

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

import MapView from 'react-native-maps';

export default class ReactNativeMaps extends Component {
  render() {
   const { region } = this.props;
   console.log(region);

   return (
     <View style ={styles.container}>
       <MapView
         style={styles.map}
         region={{
           latitude: 39.1329,
           longitude: 84.5150,
           latitudeDelta: 0.015,
           longitudeDelta: 0.0121,
         }}
       >
       </MapView>
     </View>
   );
 }
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

AppRegistry.registerComponent('ReactNativeMaps', () => ReactNativeMaps);

AndroidManifest.xml 文件:

AndroidManifest.xml File:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.reactnativemaps"
    android:versionCode="1"
    android:versionName="1.0">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

    <uses-sdk
        android:minSdkVersion="16"
        android:targetSdkVersion="22" />

    <application
      android:name=".MainApplication"
      android:allowBackup="true"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:theme="@style/AppTheme">
      <meta-data
     android:name="com.google.android.geo.API_KEY"
     android:value="AIzaSyC3injbScdjmMp7J5MM1GqBhSb-kulIF_8"/>
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

推荐答案

我也遇到过类似的问题，花了很多时间才解决.通常在真实设备上一切正常，但无法在我的一些模拟器变体上显示谷歌地图.显然，程序代码没问题，那么问题是为什么?

I had similar problem and spent a lot of time before solve it. Usually all was OK on real device, but fails to show Google Map on some of my emulator variants. Obviously, the program code was OK, so the question was why?

到目前为止我所观察到的:

What I have observed so far:

1. 如果硬件加速被禁用 - 一切都恢复正常.

1. If hardware acceleration is disabled - all is back working.

如果使用纯 android 映像，cpu-arm(不是加速 x86，它更慢)，但也可以.

If use pure android image, cpu-arm (not accelerated x86, it was slower), but also works.

如果您在 x86_64 操作系统下 - 在我的情况下是 macOS 10.13.2，请使用 x86_64 版本的模拟器映像，而不是通用 x86！那是我的主要错误，没有让它起作用！用 x86_64 变体替换我的模拟器的图像，解决所有问题！

If you are under x86_64 OS - macOS 10.13.2 in my case, USE x86_64 version of emulator image, instead of universal x86!!! That was my major mistake to do not get it works! Replacing my emulator's image with x86_64 variants, solve all of them!

这篇关于Android 模拟器没有在屏幕上显示谷歌地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！