【React Native】【Expo】Androidアプリでマップを表示してみる

2021年1月3日2021年1月4日

はじめに

お世話になります、hosochinです
今回は
「React Native+Expoでマップを表示」
を試してみたいと思います
なお、取り扱うのはAndroidアプリについてです

やってみる

react-native-mapsというiOS,Androidアプリでマップを表示するコンポーネントがあるのでそいつを使っていきます！
Androidの場合はGoogle Mapを表示してくれる感じですねー
なので今回はGoogle Cloud PlatformでマップAPIも使っていきます！
基本的な流れはこちらに沿ってやっていきたいと思います
ちなみに、React NativeとExpoについてはこちらの記事で軽く触れました

【React Native】【Expo】Hello Worldしてみた

1. Expoインストール

-- インストール
$ npm install --global expo-cli

-- バージョン確認
$ expo --version
3.18.0

2. プロジェクト作成

-- プロジェクト作成、今回はテンプレートはblank (TypeScript)を選択
$ expo init tutorial-react-native-maps

-- react-native-mapsをインストール
$ cd tutorial-react-native-maps
$ expo install react-native-maps

3. Maps SDK for Androidを有効にする

Google Cloud Platformから「Maps SDK for Android」を有効にします
やり方は【Google Maps API】webブラウザに地図を表示してみるを参考にしてみてください
上記の記事だとwebブラウザに表示しようとしているので「Maps JavaScript API」を使っていますが、「Maps SDK for Android」に置き換わる感じです

4. APIキーをapp.jsに追加

3で作ったAPIキーをapp.jsに追加します
App.tsxも変更します

• tutorial-react-native-maps/app.js

...省略...
    },
    "android": {
      "config": {
        "googleSignIn": {
          "apiKey": "<APIキー>"
        },
        "googleMaps": {
          "apiKey": "<APIキー>"
        }
      },
...省略...

• tutorial-react-native-maps/App.tsx

// https://docs.expo.io/versions/latest/sdk/map-view/
// ↑のページ内のコードをコピペ
import * as React from "react";
import MapView from "react-native-maps";
import { StyleSheet, Text, View, Dimensions } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <MapView style={styles.map} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  map: {
    width: Dimensions.get("window").width,
    height: Dimensions.get("window").height,
  },
});

5. 動かしてみる

以下のコマンドをtutorial-react-native-maps配下で実行してやると、ブラウザが立ち上がってQRコードが表示されると思います

$ expo start

エミュレータ使うより実機使う方が手っ取り早い気がしてるので自分はいつも実機で動かしてます
ただ専用のアプリをインストールする必要がありますが
・AndroidならGooglePlayから「Expo」をインストール
・iOSならApp Storeから「Expo Client」をインストール
↑のアプリ内からQRコードを読み取ってやるとアプリが起動します
これで無事地図が表示されたかと思います！