【React Native】簡易な地図アプリ

8178 ワード
reactnative アプリ 入門 アプリ テキストリンク

React Nativeを書籍で一通り学習したので
少しアプリっぽいものを作ってみたくて
いろいろネットを参照しながら、簡易ですが地図アプリが実装できたので
公開いたします。

ハマったこと

importのところでimport先が書籍では古くずっとエラーがで続けたところ。
最新の公式ドキュメントをみたら無事解決しました。

環境

今回初めてExpoで環境作って動かしてみました。
【React Native】 Expoを使えば審査なしにアプリ更新出来てウハウハなのか？

成果物

コード

App.js
// 簡易な地図アプリ

import React, { Component } from 'react';
import { StyleSheet, AsyncStorage, Alert, TextInput, Text, View, Picker, Button } from 'react-native';
// npm install react-native-elements --save
import { Header } from 'react-native-elements';
// 注意 こちらではエラーとなります
// import { Permissions, MapView, Location, Constants } from 'Expo';
// 下記が正解（公式ドキュメント 2019.12.9現在）
import Constants from 'expo-constants';
import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';
// npm install react-native-maps --save
import MapView from 'react-native-maps';

export default class App extends React.Component {
  render() {
      return (
        // Map全体
        <MapView
            style={{ flex: 1 }}
            initialRegion = {{
                latitude: 34.6941375,
                longitude: 135.1962625,
                // 小さくなるほどズームになる
                latitudeDelta: 0.01,
                longitudeDelta: 0.01,
            }}
        >
          {/* Mapスポット */}
          <MapView.Marker
              coordinate = {{
                  latitude: 34.6941375,
                  longitude: 135.1962625,
              }}
              title={ 'JR三ノ宮駅' }
              description={ 'JR三ノ宮駅です' }
              onPress={ () => alert('JR三ノ宮駅がクリックされました') }
          />
          <MapView.Marker
              coordinate={{
                  latitude: 34.6929378,
                  longitude: 135.1944493,
              }}
              title={ '阪急神戸' }
              description={ '阪急神戸です' }
              onPress={ () => alert('阪急神戸がクリックされました') }
          />
      </MapView>
      );
  }
}

const styles = StyleSheet.create ({
  // propaty: {
  //   margin: 
  // },
});