[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
리액트네이티브로 개발중이고 현재 Android 14.0 UpsideDownCake에 픽셀은 1080*1920 420dpi입니다.
아래와 코드와 같이 웹뷰로 카카오지도 불러오려고 했는데, 흰 화면만 뜹니다.
import React from ‘react’;
import {View, StyleSheet} from ‘react-native’;
import WebView from ‘react-native-webview’;
const MapComponent = () => {
console.log(‘MapComponent start’);
const injectedJavaScript = alert("JavaScript 실행됨"); // JavaScript 실행 여부 확인용 console.log("JavaScript_Start"); (function waitForKakao() { var container = document.getElementById('map'); if (!container) { console.error("Map container not found. Retrying..."); setTimeout(waitForKakao, 2000); // 2초 후 다시 확인 return; } if (window.kakao && window.kakao.maps) { console.log("Kakao Maps SDK 로드 완료"); var options = { center: new kakao.maps.LatLng(37.5665, 126.9780), level: 3 }; var map = new kakao.maps.Map(container, options); console.log("지도 초기화 완료"); } else { console.log("Kakao Maps SDK 로드 대기 중..."); setTimeout(waitForKakao, 2000); // 0.1초 후 다시 확인 } })(); ;
return (
<WebView
source={{
html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>카카오 지도</title> <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=67b40bba601a469f72b360b25142d074&libraries=services,clusterer,drawing"></script> </head> <body> <div id="map" style="width:100%;height:100%;"></div> </body> </html> ,
}}
injectedJavaScript={injectedJavaScript}
javaScriptEnabled={true}
domStorageEnabled={true}
cacheEnabled={false} // 캐시 비활성화
cacheMode=“LOAD_NO_CACHE” // 캐시 모드 설정
onMessage={event => {
const message = JSON.parse(event.nativeEvent.data);
if (message.error) {
console.warn('Map loading error: ', message.error);
}
}}
onError={syntheticEvent => {
const {nativeEvent} = syntheticEvent;
console.warn('WebView error: ', nativeEvent);
}}
style={styles.map}
/>
);
};
const styles = StyleSheet.create({
container: {flex: 1},
map: {width: ‘100%’, height: ‘100%’},
});
export default MapComponent;
화면은 위와 같이 흰 화면만 뜹니다.
개발자 도구에서는 지도 초기화 완료라는 로그가 찍히는걸로 봐서는 제대로 호출은 한 것 같은데 화면 자체가 나오지 않는 이유가 무엇인지 궁금합니다.