react-native - 如何使用 react-native-maps 显示地图 [英] react-native - How to display map using react-native-maps

问题描述

我正在尝试使用

是我的样式表还是我调用了MapView"组件?

代码如下:

var MapView = require('react-native-maps');类 Map 扩展了 React.Component {构造函数(道具){超级(道具)；this.state = {}}使成为() {返回 (<视图样式={styles.container}><MapView style={styles.map}初始区域={{纬度:37.78825，经度:-122.4324，纬度Delta:0.0，经度Delta:0.0，}}/></查看>);}};var 样式 = StyleSheet.create({容器: {弹性:1，justifyContent: '中心',alignItems: '中心',背景颜色:'#F5FCFF'，},地图: {位置:'绝对'，顶部:0，左:0，右:0，底部:0，}});

解决方案

运行

$react-native 链接

从项目根目录将 react-native-maps 与您的项目链接.(或者您可以按照此处列出的这些手动步骤操作:https://github.com/airbnb/react-native-maps/blob/master/docs/installation.md#option-3-manually )

I am trying to display a Map View using react-native-maps. The component appears to be displaying except it is blank.

Is it my stylesheet or am I calling the 'MapView' component right?

Here is the code:

var MapView = require('react-native-maps');

class Map extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <MapView style={styles.map}
          initialRegion={{
              latitude: 37.78825,
              longitude: -122.4324,
              latitudeDelta: 0.0,
              longitudeDelta: 0.0,
          }}
        />
      </View>

    );
  }
};


var styles = StyleSheet.create({
 container: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: '#F5FCFF',
 },
   map: {
     position: 'absolute',
     top: 0,
     left: 0,
     right: 0,
     bottom: 0,
   }
});

解决方案

Run

$react-native link

from the project root directory to link the react-native-maps with your project. (or you can follow these manual steps listed here:https://github.com/airbnb/react-native-maps/blob/master/docs/installation.md#option-3-manually )

这篇关于react-native - 如何使用 react-native-maps 显示地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！