네이버 맵 연동 (사용하기)

라이브러리 깃헙 주소

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

구현 결과 영상

소스코드

• PNaverMap.js 파일에 별도의 컴포넌트로 구성함.

import React from 'react'
// import NaverMapView, { Circle, Marker, Path, Polyline, Polygon } from "react-native-nmap";
import NaverMapView, {Marker} from 'react-native-nmap'

export function PNaverMap() {
    const P0 = { latitude: 37.564362, longitude: 126.977011 };

    return (
        <NaverMapView style={{ width: '100%', height: '100%' }}
            showsMyLocationButton={true}
            center={{ ...P0, zoom: 16 }}
        onTouch={e => console.warn('onTouch', JSON.stringify(e.nativeEvent))}
        onCameraChange={e => console.warn('onCameraChange', JSON.stringify(e))}
        onMapClick={e => console.warn('onMapClick', JSON.stringify(e))}
        useTextureView
        >

            <Marker coordinate={P0} onClick={() => console.warn('onClick! p0')} />
     
        </NaverMapView>
    );
}

사용하는 지점의 코드

• PMain.js

...
import {PNaverMap} from './PNaverMap'
...

export default function PMain({ navigation }) {

...

  return (
    <>
      <View style={{ height: 50, flexDirection: "row" }}>
        {/* 드로워 버튼 연동 */}
        {/* 서치바 기능 */}
      </View>

      {/* 지도화면 연동할 자리 */}
      <View style={{ flex: 1 }}>        
        <PNaverMap />
      </View>
    </>
  );
}