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で拡大・縮小ができます。