Eojin Han

패키지 설치

react-native-naver-map

https://github.com/QuadFlask/react-native-naver-map

설치


$ npm install react-native-nmap --save
or
$ yarn add react-native-nmap

[ios] - pod 설치

React Native 0.60 + (자동 링킹되므로 그냥 install만 하면 됨)


#프로젝트 내의 ios폴더로 이동
$ cd ios

#pod 설치
$ pod install   #<------ *******필수*******

React Native ≤ 0.59 (수동 링킹 커맨드 입력해야함)


#0.60 이하라면 링킹까지 해줘야함 (0.60부턴 자동)
$ react-native link react-native-nmap

#프로젝트 내의 ios폴더로 이동 및 pod 설치
$ cd ios/ && pod install

ios sdk 사용방법

https://docs.ncloud.com/ko/naveropenapi_v3/maps/ios-sdk/v3/start.html

git-lfs 설치

https://github.com/navermaps/ios-map-sdk#대용량-파일을-받기-위해-git-lfs-설치가-필요합니다


$ sudo gem install cocoapods // cocoapods 설치
$ brew install git-lfs       // homebrew 사용시 git-lfs 설치

//react-native 프로젝트 경로로 이동 후
$ git-lfs install            // git-lfs 이니셜라이즈
$ pod install --repo-update  // ios폴더로 이동 후에 해야함.

iOS 추가 설정

네이버 클라우드 콘솔 : https://auth.ncloud.com/login

1. 앱 프로젝트의 Podfile에 네이버 지도 SDK에 대한 의존성을 선언함.


target 'NaverMapDemo' do

    pod 'NMapsMap'

end

주의 : tartget 'NaverMapDemo' 라고 되어있는데 본인 프로젝트 이름이어야함.

2. info.plist 파일에 아래 프로퍼티 추가하고, 발급받은 client-ID로 바꿈


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
...
    <key>NMFClientId</key>
    <string>YOUR_CLIENT_ID_HERE</string>
...
<dict>
<plist>

Android SDK 사용방법

https://docs.ncloud.com/ko/naveropenapi_v3/maps/android-sdk/v3/start.html

Android 추가 설정

1. /android/build.gradle 파일에 아래와 같은 레포지터리 추가.

android 폴더의 루트 프로젝트의 build.gradle 이다.


allprojects {
    repositories {
        google()
        jcenter()

        // 네이버 지도 저장소
        maven {
            url 'https://navercorp.bintray.com/maps'
        }
    }
}

2. /android/app/build.gradle 파일에 네이버 지도 SDK에 대한 의존성을 선언.

이번엔 루트 프로젝트가 아닌 앱 모듈의 build.gradle이다.


dependencies {
    // 네이버 지도 SDK
    implementation 'com.naver.maps:map-sdk:3.9.1'
}

3. /android/app/src/AndroidManifest.xml 파일에 아래 내용 추가하고, 발급받은 client-ID로 바꿈.


<manifest>
    <application>
        <meta-data
            android:name="com.naver.maps.map.CLIENT_ID"
            android:value="YOUR_CLIENT_ID_HERE" />
    </application>
</manifest>

네이버 맵 준비사항 (iOS, Android)