React Native react-native-maps Mapview没有显示

Question

我正在尝试使用airbnb的react-native-maps,但地图没有出现在模拟器上.我的代码似乎与解决了这个问题的其他代码相同,但模拟器只是一个带有红色边框的空白屏幕.开箱即用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

你忘了添加styles到MapView:

<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和bottom值的绝对位置.如回购中所述

Answer 2

1. 转到 Google Cloud Platform Console。https://cloud.google.com/console/google/maps-apis/overview

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

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

4. 激活“Android 版地图 SDK”和“iOS 版地图 SDK”。

5. 然后创建新的 API 密钥并将其添加到项目的AndroidManifest.xml内部<application>标签中：

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