在react-native中使用MapView时的空白映射

时间:2016-11-06 05:18:53

标签: android react-native android-mapview genymotion

我正在尝试在我的react-native应用程序中实现MapView组件,但是当我运行应用程序时,我得到的只是一个空白方块,地图应该是(用红色边框包围。

我正在使用genymotion并且我安装了Google Play服务。

这就是我的组件的样子......

class MainMap extends Component {
    constructor() {
    super();
  }
    render(){
        return (
            <View style={styles.container}>
            <MapView
        style={ styles.map }
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      />
  </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,
  },
});

function mapStateToProps(state) {
    return {
        users: state.users
    };
}

export default connect(mapStateToProps)(MainMap);

为什么这不起作用?我是否必须在我的模拟器中配置更多内容?我注意到这是一个重新出现的问题,但我无法找到明确的解决方案。

1 个答案:

答案 0 :(得分:0)

MapView仅在iOS上受支持。
https://facebook.github.io/react-native/docs/mapview.html

使用react-native-maps进行跨平台支持。