[React Native] Kakao Map 사용 방법

728x90

React Native에서 Kakao Map을 사용하려고 패키지를 찾아봤는데 사용할만한 패키지를 찾지 못해서 Webview를 사용해서 개발하였습니다.

App.js 파일을 아래와 같이 작성하고 실행합니다.

import { WebView } from 'react-native-webview';

const html = `
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=앱키&libraries=services,clusterer,drawing"></script> 
    </head>
    <body >
        <div id="map" style="width:500px;height:400px;"></div>
        <script type="text/javascript">
            (function () {
                const container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
                const options = { //지도를 생성할 때 필요한 기본 옵션
                    center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
                    level: 3 //지도의 레벨(확대, 축소 정도)
                };
                
                const map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
                
                // 주소-좌표 변환 객체를 생성합니다
                const geocoder = new kakao.maps.services.Geocoder();
            })();
        </script>       
    </body>
</html>    
`;

export default function App() {
  return (
    <WebView
        source={{ html: html }}
    />
  );
}

앱에 Kakao Map이 노출됩니다.

참고자료

https://stackoverflow.com/questions/60907654/how-to-load-script-in-react-native-view

728x90

저작자표시

'개발 > react native' 카테고리의 다른 글

[Expo] eas update를 통해 앱배포없이 수정사항 반영하기 (1)	2024.01.24
Expo를 사용해서 React Native App 개발 (0)	2024.01.18

'개발 > react native' 카테고리의 다른 글

티스토리툴바