[ React Native ] 네이버 지도 연동하기

사용할 라이브러리 

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

GitHub - QuadFlask/react-native-naver-map: 🗺️naver map for react-native

 

1. 사전 설정

네이버 지도를 사용하기 위해 클라이언트 ID 발급 부분 참고

1) 안드로이드 

https://navermaps.github.io/android-map-sdk/guide-ko/1.html

 

2) iOS

https://navermaps.github.io/ios-map-sdk/guide-ko/1.html

 

먼저 네이버 클라우드 플랫폼 로그인 후에 결제수단 등록해야 사용 가능합니다.
콘솔 메뉴에서 보면
Services > Ai Naver API > Maps 클릭

Application 등록 클릭하면 서비스 선택에서 Maps항목 참고

필요한 서비스 체크 후 서비스 환경 등록으로 내려가서

안드로이드 앱 패키지 이름과 iOS Bundle ID 추가하고 등록하게 되면 등록하기 전 페이지에서 앱이 생긴것을 확인할수 있습니다.

앱 하단에 인증정보를 보게되면 client ID를 확인할수 있는데 복사해서 사용하시면 됩니다.

 

안드로이드 추가 설정

/android/build.gradle 파일에 아래와 같이 레포지터리를 추가합니다

allprojects {
    repositories {
        google()
        jcenter()
        // 네이버 지도 저장소
        maven {
            url 'https://naver.jfrog.io/artifactory/maven/'
        }
    }
}

/android/app/src/AndroidManifest.xml에 아래와 같이 추가하고 발급받은 클라이언트 아이디로 바꿔줍니다.

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

 

iOS 추가설정

info.plist에 아래와 같이 발급받은 클라이언트 아이디를 추가해줍니다.

    <key>NMFClientId</key>
    <string>YOUR_CLIENT_ID_HERE</string>

 

iOS 의 경우는 git-lfs 설치가 되어 있어야 지도sdk를 가져올수 있습니다. 참고 

(필수설치) 설치가 안된경우 빌드가 안되어서 앱 실행이 안됩니다.

 

 

코드 사용 결과

참고사이트 예제를 보고 맵을 추가해주시면 됩니다.

 

지도를 적절하게 사용하시면 됩니다~!