React Native Maps 사용하기 , 리액트네이티브 맵, install react-native-maps

테스트용 프로젝트를 생성한다.

react-native init MapTest --version="0.56.0"

cd MapTest

npm install --save react-native-maps

react-native link react-native-maps

cocoa pods 설치하기

sudo gem install cocoapods

MapTest 폴더내에서 cd ios 명령어로 ios 폴더러 접근한뒤 pod init 명령어를 실행한후 open podfile 명령을 실행한다.

podfile 빨간선으로 체크한 부분을 수정해줘야한다. 

pod install 명령을 실행한다. 

Xcode를 실행하여 .xcworkspace 파일을 open 한다. 

Project 에 AirGoogleMaps을 추가한다.

AirGoogleMaps을 드래그하여 프로젝트 폴더 내부로 옮기면 아래와같은 화면이 출력된다. 

Added folders에서 Create groups 선택하고 Finish 버튼을 선택한다. 

Libraries folder 선택후 Add Files ... 를 선택하여 AirMaps.xcodeproj 추가한다. 

Build Phase -> Link Binary With Libraries -> libAirMaps.a 추가한다. 

Build Setting -> Header Search Paths 선택하고 위에 스샷과같이 $(SRCROOT)/../node_models/react-native-maps/AirMaps 선택한다.

AppDelegate.m 파일을 선택하고 빨간영역에 내용을 추가한다. 18라인에 @"API서비스키" 입력한다.

Xcode에서  Product->Clean,  Product->Build 선택한다. 

Build가 실패했다고 나오는데, 에러표시를 클릭하면 아래와 같은 에러가 난다.

네비게이터에서 All 을선택하고 Preprocessor Macros -> HAVE_GOOGLE_MAPS=1 값을 선택하고,  Product->Clean,  Product->Build 다시 한다. 빌드가 성공하면 App.js를 아래와 같이 작성한다. 

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import MapView, {PROVIDER_GOOGLE} from 'react-native-maps';
 
export default class App extends Component {
  render() {
    return (
      <MapView
        provider={PROVIDER_GOOGLE}
        style={{flex:1}}
        region={{
          latitude: 42.882000,
          longitude: 74.582748,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421
        }}
        showsUserLocation
        />
    );
  }
}

프로젝트를 실행한다. 

react-native-maps 정상적으로 호출되는것을 확인하였다. 

react-native-maps 설정하고 테스트하는데 생각보다 오래걸렸다. ㅠㅠ

참고

https://github.com/react-native-community/react-native-maps 

https://github.com/react-native-community/react-native-maps/blob/master/docs/installation.md

https://medium.com/quick-code/react-native-location-tracking-14ab2c9e2db8

https://medium.freecodecamp.org/how-to-integrate-maps-in-react-native-using-react-native-maps-5745490fe055

https://medium.com/@juanli_dev/install-react-native-maps-bccae45b6083

https://medium.com/@mehulmistri/integrate-airbnb-google-maps-in-a-react-native-app-889f0c31a7a8

https://github.com/react-native-community/react-native-maps/issues/2573