react-native - 如何使用 react-native-maps 显示地图

react-native - How to display map using react-native-maps

我正在尝试使用 react-native-maps 显示地图视图。 该组件似乎正在显示,但它是空白的。

是我的样式表还是我正确调用了 'MapView' 组件?

代码如下:

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,
   }
});

运行

$react-native link

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