在 react-native 中使用 MapView 时的空白地图

Question

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

我正在使用 genymotion 并且安装了 google 播放服务。

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

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

为什么这行不通？我是否必须在模拟器中配置更多内容？我注意到这是 android 重复出现的问题，但我找不到明确的解决方案。

Answer 1

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

使用 react-native-maps 以获得跨平台支持。

在 react-native 中使用 MapView 时的空白地图

Blank map when using MapView in react-native

android

android-mapview

genymotion

react-native