Android模拟器未在屏幕上显示Google地图 [英] Android Emulator not showing Google Maps on Screen

问题描述

您好，我一直在试着遵循这个 https://github.com/airbnb/react -native-maps 教程
我尝试了他们所说的一切，但在android studio的模拟器上获得了一个空白屏幕。

我的代码：

import React，{Component} from'反应';
从'react-native'导入{
AppRegistry，
StyleSheet，
Text，
View
};

从'react-native-maps'导入MapView;

导出默认类ReactNativeMaps扩展组件{
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>
）;


$ b const style = StyleSheet.create（{
container：{
position：'absolute'，
top：0 ，
left：0，
right：0，
bottom：0，
justifyContent：'flex-end'，
alignItems：'center'，
$，
地图：{
位置：'绝对'，
顶部：0，
剩下：0，
右：0，
底部： 0，
}，
}）;

AppRegistry.registerComponent（'ReactNativeMaps'，（）=> ReactNativeMaps）;


AndroidManifest.xml文件：

 < manifest xmlns：android =http://schemas.android.com/apk/res/android
 package =com.reactnativemaps 
 android：versionCode =1
 android：versionName =1.0> 
 
<使用权限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> 
 < category android：name =android.intent.category.LAUNCHER/> 
< / intent-filter> 
< / activity> 
< activity android：name =com.facebook.react.devsupport.DevSettingsActivity/> 
< / application> 
 
< / manifest> 
  

请帮忙。谢谢

解决方案

我有类似的问题，并花了很多时间才解决它。通常，在真实设备上一切正常，但未能在我的某些仿真器变体上显示Google Map。很明显，程序代码是OK的，所以问题是为什么？

到目前为止，我观察到：

1. 如果硬件加速如果使用纯粹的Android图像，cpu-arm（不加速的x86，速度较慢），但也可以。如果你是x86_64操作系统 - 在我的情况下，macOS 10.13.2，USE x86_64版本的模拟器映像，而不是通用的x86！这是我的主要错误，不要让它成功！用x86_64变体替换我的模拟器映像，解决所有这些问题！

Hi 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.

My Code:

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 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>

Please help. Thanks

解决方案

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. If hardware acceleration is disabled - all is back working.

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

3. 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模拟器未在屏幕上显示Google地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！