Reactjs React Native React Native maps Mapview未显示

我正在尝试使用airbnb的react本地地图，但该地图没有显示在模拟器上。我的代码似乎与解决问题的其他代码相同，但模拟器只是一个带有红色边框的空白白色屏幕。 开箱即用的Mapview可以工作，但我想使用airbnb的版本

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import MapView from 'react-native-maps';

export default class Haulr extends Component {
  render() {
    return (
    <MapView
      initialRegion={{
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
    />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  map: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

AppRegistry.registerComponent('Haulr', () => Haulr);

import React，{Component}来自'React'；
进口{
评估学，
样式表，
文本，
看法
}从“反应本机”；
从“react native maps”导入MapView；
导出默认类搬运器扩展组件{
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
},
欢迎:{
尺寸：20，
textAlign:'中心'，
差额：10，
},
说明：{
textAlign:'中心'，
颜色：'#333333'，
marginBottom:5，
},
地图：{
位置：'绝对'，
排名：0，
左:0,，
右:0,，
底部：0，
},
});
AppRegistry.registerComponent（'Handler'，（）=>Handler）；

您忘了将

样式添加到
地图视图中
：

<MapView

  style={styles.map}

  initialRegion={{
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  }}
/>

因为要使mapView正常工作，需要将mapView的样式设置为绝对位置，并设置“上”、“左”、“右”和“下”值。正如前面提到的
 < P>，你在空白地图周围看到红色边框的原因是因为很可能在PACKAG.JSON中，你必须指定版本>0.124，而不是^ 0.124（这意味着兼容0.124）。因此，请查找
依赖项
部分，并从

"dependencies": {
    "react": "15.4.2",
    "react-native": "0.41.2",
    "react-native-maps": "^0.12.4",
    ....
},

到

然后，运行以下命令：

$ npm update
$ react-native link
$ cd ios
$ touch Podfile

复制并粘贴到您的播客文件。更改目标并保存文件。然后跑

$ pod install

您可能还必须将“样式”属性添加到地图视图中：

<MapView style={styles.map}
   initialRegion={{
    ... 
   }}
/>



这篇文章值得赞扬
我遇到了这个问题，我所要做的就是重新编译这个项目。一旦我这样做了，红色边框就消失了，我得到了要渲染的地图。
我搞乱了我的google API键，我重新生成了，在google开发者控制台中，我连接了SHA键，它就工作了。
确保你使用的是Android键（在我的情况下，我使用的是错误的键）。
在凭证中，在Google云平台内，复制AndroidManifest.xml中的Android密钥和密码

<meta-data
  android:name="com.google.android.geo.API_KEY"
  android:value="YOUR_ANDROID_KEY"/>



转到谷歌云平台控制台

使用顶部导航栏中的下拉菜单选择您的项目

单击菜单并转到“API和服务”>“库”

激活“Android版地图SDK”和“iOS版地图SDK”

然后创建新的API密钥并将其添加到
AndroidManifest.xml
内
标记中的项目中：



您必须为MapView指定样式

<MapView
  style={{flex:1}}
  region={{latitude: 52.5200066,
  longitude: 13.404954,
  latitudeDelta: 0.005,
  longitudeDelta: 0.005}}
   />



这里flex的值为1，所以地图在整个屏幕上都可见。
解决方案：在您的Google云平台帐户上启用计费

基本上，您必须遵循以下指南：

然后，您必须启用适用于Android（或iOS）的地图SDK，然后启用计费。即使Android版地图SDK完全免费，他们也想要你的信用卡。在那之后，它就可以正常工作了。
您解决了这个问题吗？我现在也有同样的问题：（发现这很有用这对我不起作用我得到了一个带有红色边框的白色屏幕出于某种原因你能分享一些你的代码吗？+你使用的是什么平台。附言：最好再问一次这个问题
<meta-data
  android:name="com.google.android.geo.API_KEY"
  android:value="YOUR_ANDROID_KEY"/>

<meta-data
  android:name="com.google.android.geo.API_KEY"
  android:value="YOUR_ANDROID_KEY"/>

<MapView
  style={{flex:1}}
  region={{latitude: 52.5200066,
  longitude: 13.404954,
  latitudeDelta: 0.005,
  longitudeDelta: 0.005}}
   />