ReactNative(Expo)でMapを利用する

準備

npm install --save react-native-maps

イメージ

実装

地図を表示してピン（Marker）を設置。クリックできるようにする。

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MapView from 'react-native-maps';

export default class App extends React.Component {
    render() {
        return (
            <MapView
                style={{ flex: 1 }}
                initialRegion={{
                    latitude: 35.681236,
                    longitude: 139.767125,
                    latitudeDelta: 0.02, //小さくなるほどズーム
                    longitudeDelta: 0.02,
                }}
            >
                <MapView.Marker
                    coordinate={{
                        latitude: 35.681236,
                        longitude: 139.767125,
                    }}
                    title={"東京駅"}
                    description={"JRの駅です。"}
                    onPress={()=>alert("click")}
                />
            </MapView>
        );
    }
}

注意点

AndroidではGoogle Map APIのKeyの設定が必要らしい(iOSもかな）。

• https://qrunch.net/@moecaf/entries/pfvpg3KrVKtzigRg
• https://rennnosukesann.hatenablog.com/entry/2018/06/07/225623

まとめると下記のような感じかな。。。

app.json

{
  "expo": {

  },
  "ios": {
    "config": {
      "googleMapsApiKey": "[API_Key]"
    }
  },
  "android":{
  		"config":{
  			"googleMaps":{
  				"apiKey": "[API_KEY]"
  			}
  		}
  }
}