Table of Content
expoを使ってMapを表示する
expoのMapViewを使えばとても簡単にMapを表示できました。MapViewコンポーネントを下のように挿入するだけです。
MapScreen.jsというMapを表示させるようのjsファイルを準備します。
import React, { Component } from 'react'; import { View, Text, Platform } from 'react-native'; import { MapView } from 'expo'; class MapScreen extends Component { render() { return ( <View style={{ flex: 1 }}> <MapView style={{ flex: 1 }} /> </View> ); } } export default MapScreen;
Mapの場所とズームレベルを指定するには、MapViewタグにregionを指定するだけです。
import React, { Component } from 'react'; import { View, Text, Platform } from 'react-native'; import { MapView } from 'expo'; class MapScreen extends Component { state = { region: { longitude: -122, latitude: 37, longitudeDelta: 0.04, latitudeDelta: 0.09, } } render() { return ( <View style={{ flex: 1 }}> <MapView region={this.state.region} style={{ flex: 1 }} /> </View> ); } } export default MapScreen;
非常に簡単です。
ioxのSimulator上で、Mapを操作するときには、Dragで移動、option+Dragで拡大・縮小ができます。