React Native react-native-maps Mapview不显示

Question

我正在尝试使用airbnb的react-native- map，但是该map没有显示在模拟器上。我的代码看起来和其他解决了这个问题的代码是一样的，但是模拟器只是一个带有红色边框的空白屏幕。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);

Answer 1

您忘记了在MapView中添加styles

<MapView

  style={styles.map}

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

别忘了定义你的风格：

    const styles = StyleSheet.create({
      map: {
        ...StyleSheet.absoluteFillObject,
      },
});

因为要使mapView正常工作，您需要将MapView的样式设置为设置了top、left、right和BOTT值的绝对位置。如上所述，in the repo

Answer 2

1. 转到谷歌云平台控制台。使用顶部导航栏中的下拉菜单https://cloud.google.com/console/google/maps-apis/overview
2. Select您的项目。
3. 点击菜单，进入“API & Services”> "Library"
4. Activate "Maps SDK for Android“和"Maps SDK

iOS”。

1. 然后创建新的API密钥并将其添加到AndroidManifest.xml inside <application> tag中的项目中：

Answer 3

我弄乱了我的google API密钥，我重新评级，在google开发者控制台中，我附加了SHA密钥，它起作用了。