BETA

ExpoでMapを表示するのは簡単だけど、API-Keyの設定をおろそかにしていると本番ビルドの段階でAndroid版がクラッシュすると言う話

投稿日:2019-08-19
最終更新:2019-08-19

タイトルで全部解説してしまっているけど、以下説明です。

ExpoでMapを表示するのはとても簡単。

import React from 'react';  
import MapView from 'react-native-maps';  

export default class App extends React.Component {  
  render() {  
    return (  
      <MapView style={{flex: 1}} />  
    );  
  }  
}  

npm i react-native-maps を実行するだけ。
しかしGoogle Storeに出すために

expo build:android  

を実行して作成されたapkファイルを実機で動かそうとすると、MapViewが設置されている画面に遷移する際に、強制的に再起動してしまいます。

app.jsonにapi keyの情報を追加

expoのdocumentにもあるように、google maps のapi keyを取得してapp.jsonに書き足せばいい。

{  
  "expo": {  
    "name": "sample",  
    "slug": "sample",  
    ~~~  
     省略  
    ~~~  
    "ios": {  
      "buildNumber": "1",  
      "supportsTablet": true,  
      "bundleIdentifier": "(省略)"  
    },  
    "android": {  
      "versionCode": 1,  
      "package": "(省略)",  
      "config": {  
        "googleMaps": {  
          "apiKey": "(api keyをペーストする)"  
        }  
      }  
    },  
    "description": ""  
  }  
}  

既存のapp.jsonのandroid部分にapp.config.googleMaps.apiKeyを追記すれば良い。

再度buildを行えば動くようになる。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@moeka802の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう