React 原生地图集成答案

【问题标题】：React native map integrationReact 原生地图集成
【发布时间】：2017-08-10 19:48:20
【问题描述】：

我正在尝试将地图集成到本机反应中。我正在遵循以下教程。 https://github.com/airbnb/react-native-maps

我浏览了所有的安装说明。我正在使用react-native version : 0.44.0 和react-native-map version : 0.13.0 我确保 react-native-link 与 android 和 iOS 相关联。在 ios 模拟器中渲染地图视图时，地图没有显示，只有我能够显示带有红色轮廓的空白地图。

请检查我下面的代码，让我知道我哪里错了。

var MapView = require('react-native-maps');
<MapView
    initialRegion={{
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
    }}
/>

【问题讨论】：

我建议您先检查它是否适合您使用 Genymotion。你用的是模拟器还是物理设备？

标签： ios react-native react-native-ios react-native-maps

【解决方案1】：

尝试添加一个视图和一些高度和 ...StyleSheet.absoluteFillObject

<View style={{height:400}}>
    <MapView 
         style={{ ...StyleSheet.absoluteFillObject,height:400 }}
         initialRegion={{
             latitude: 37.78825,
             longitude: -122.4324,
             latitudeDelta: 0.0922,
             longitudeDelta: 0.0421,
         }}
    />
</View>

【讨论】：

您好，@jeremie，感谢您的回复。很抱歉告诉你它对我不起作用。我已经浏览过这段代码。我还将 react-native-map 版本更新为 0.16.0。但是没有效果。
在将 RN 更新到 0.47.1 后，我终于解决了这个问题。我也将地图版本更新到 0.16.1。现在它工作正常。

【解决方案2】：

记得在 AndroidManifest.xml 中包含您的 Google Maps API 密钥。

【讨论】：