使用 react-native-maps 时，地图未显示在 android 模拟器上答案

【问题标题】：Map doesn't shown on android simulator when using react-native-maps使用 react-native-maps 时，地图未显示在 android 模拟器上
【发布时间】：2017-02-15 07:55:58
【问题描述】：

我正在使用 react-native-maps 进行 android 开发。我按照此链接中的说明进行操作：https://github.com/lelandrichardson/react-native-maps/blob/master/docs/installation.md。启动应用程序后，UI 不显示地图。相反，它显示一个空白页面。下面是我使用的代码。类似的代码在 iOS 模拟器上运行良好。我不知道为什么不在android上工作。

import React, {


AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  Image,
  ListView,
  TextInput,
  TouchableHighlight,
  Dimensions,
  MaterialButtonFixed,
 //MapView,
} from 'react-native';

import MapView from 'react-native-maps';


class MapPage extends Component{

    constructor(props){
        super(props);
        this.state = {
            region:{
                latitude: 4.21048,
                longitude: 101.97577,
                latitudeDelta: 1,
                longitudeDelta: 10,
            }
        }
    }

    onRegionChange(region){
        console.log('region changed ', region);
        this.setState({region});

    }

    render() {
        return(
            <View style={styles.container}>
                <MapView 
                      ref="map"
                   style={ styles.map }
                   mapType={"standard"}
                   region={this.state.region}
                   zoomEnabled={true}
                   scrollEnabled={true}
                   showsScale={true}
                   onRegionChange={this.onRegionChange.bind(this)}
                 >

                 </MapView>
            </View>
            )
    }
}

const styles = StyleSheet.create({
  map: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 30,
    marginTop: 65,
    flex:1,
    padding: 30,
    alignItems: 'center',
    // flexDirection: 'row',
    alignSelf: 'stretch',
    backgroundColor: 'red',
  },
  inputText: {

    height: 36,
      padding: 4,
      marginRight: 5,
      flex: 4,
      fontSize: 18,
      borderWidth: 1,
      borderColor: '#48BBEC',
      borderRadius: 8,
      color: '#48BBEC'
  }
});


module.exports = MapPage;

【问题讨论】：

标签： android google-maps react-native

【解决方案1】：

这是一个已知问题，尤其是在 Android 4.x 上。可能有几个问题导致了这种情况，但首先要做的是将 Google Apps（和 Play 服务）添加到您的模拟器：How to install Google Play Services in a Genymotion VM (with no drag and drop support)?

另请阅读 react-native-maps repo 中的问题部分，可能会有有用的线索来解决您的问题。

【讨论】：

我在 iOS 上有这个。我能做什么？

【解决方案2】：

我遇到了类似的问题。我用adb logcat追踪它。

我发现我的包链接（用react-native link 修复）和模拟器设备有问题。

我在这里添加了我的解决方案的详细描述： Android Warning: Native component for "AIRMap" does not exist

【讨论】：