react-native android,ios 네이버 지도 API 연동

신세원·2022년 3월 28일
2

React-Native

목록 보기
1/3
post-thumbnail

네이버 개발자 클라우드
react-native-nmaps

설명이 중간중간 애매하게 되어있는 부분들을 수정한다.

npm install react-native-nmap --save;

안드로이드 설정

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

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

/android/app/src/main/AndroidManifest.xml 파일에 아래와 같이 레포지터리를 추가한다. (debug내부에 있는 AndroidManifest.xml여기에도 추가해야하는지는 잘 모름)

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.navermaptest">
    <uses-permission android:name="android.permission.INTERNET" />
    (...)
++       <meta-data
++          android:name="com.naver.maps.map.CLIENT_ID"
++          android:value="12dvdq98t7" /> //예시 CLIENT_ID
    </application>
</manifest>

IOS 설정

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

<?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> //예시) <string>12dvdq98t7</string> 
...
<dict>
<plist>

IOS에서 에러날 build error

ld: warning: ignoring file /Users/momo/naverMapTest/ios/Pods/NMapsMap/framework/NMapsMap.framework/NMapsMap, building for iOS Simulator-x86_64 but attempting to link with file built for unknown-unsupported file format ( 0x76 0x65 0x72 0x73 0x69 0x6F 0x6E 0x20 0x68 0x74 0x74 0x70 0x73 0x3A 0x2F 0x2F )
Undefined symbols for architecture x86_64:
  "_OBJC_CLASS_$_NMFCameraPosition", referenced from:
      objc-class-ref in libreact-native-nmap.a(RCTConvert+NMFMapView.o)
  "_OBJC_METACLASS_$_NMFNaverMapView", referenced from:
      _OBJC_METACLASS_$_RNNaverMapView in libreact-native-nmap.a(RNNaverMapView.o)
  "_OBJC_CLASS_$_NMFCircleOverlay", referenced from:
      objc-class-ref in libreact-native-nmap.a(RNNaverMapCircleOverlay.o)
      
(...)

clang: error: linker command failed with exit code 1 (use -v to see invocation)

warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 8.0, but the range of supported deployment target versions is 9.0 to 14.4.99. (in target 'boost-for-react-native' from project 'Pods')
warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 8.0, but the range of supported deployment target versions is 9.0 to 14.4.99. (in target 'YogaKit' from project 'Pods')
warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 8.4, but the range of supported deployment target versions is 9.0 to 14.4.99. (in target 'Flipper-PeerTalk' from project 'Pods')
warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 8.0, but the range of supported deployment target versions is 9.0 to 14.4.99. (in target 'Flipper-Glog' from project 'Pods')
warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 8.0, but the range of supported deployment target versions is 9.0 to 14.4.99. (in target 'Flipper-DoubleConversion' from project 'Pods')
warning: Capabilities for Signing & Capabilities may not function correctly because its entitlements use a placeholder team ID. To resolve this, select a development team in the naverMapTest editor. (in target 'naverMapTest' from project 'naverMapTest')

** BUILD FAILED **


The following build commands failed:
        Ld /Users/momo/Library/Developer/Xcode/DerivedData/naverMapTest-bocvwscvfhxhtnejtkhbjbvdyeeu/Build/Products/Debug-iphonesimulator/naverMapTest.app/naverMapTest normal
(1 failure)

info Run CLI with --verbose flag for more details.

Solution

내프로젝트/ios/Podfile파일에"pod 'NMapsMap','3.14.1" NMapsMap 버전 추가

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '10.0'

target 'naverMapTest' do
  config = use_native_modules!
  pod 'NMapsMap','3.14.1' /// 이 부분! 버젼은 때에 따라 최신화 됨
  use_react_native!(
    :path => config[:reactNativePath],
    # to enable hermes on iOS, change `false` to `true` and then install pods
    :hermes_enabled => false
  )

  target 'naverMapTestTests' do
    inherit! :complete
    # Pods for testing
  end

  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable the next line.
  use_flipper!()

  post_install do |installer|
    react_native_post_install(installer)
  end
end

git-lfs 설치후 pod install

$ brew install git-lfs
$ cd 프로젝트
$ git-lfs install

$ cd ios/
$ rm -rf Pods/
$ pod install
profile
생각하는대로 살지 않으면, 사는대로 생각하게 된다.

0개의 댓글