React native 에서 웹뷰로 카카오맵이 연결 되지 않습니다

지도/로컬 API
1

App ID : 987335

호출하는 부분입니다.

import React from "react";
import WebView from "react-native-webview";

export default () => {
    return (
        <WebView
            originWhitelist={["*"]}
            source={{
                uri: "https://dapi.kakao.com/v2/maps/sdk.js?appkey=appkey",
            }}
            style={{ borderWidth: 1 }}
        />
    );
};

웹뷰에 js key를 포함한 카카오맵 uri를 전달하여 웹을 요청했는데 페이지에 아래와 같이 표시되고 404에러가 표시됩니다.

현재 사이트 도메인이 없어 vscode의 라이브 서버 도메인을 넣고 도메인을 실행한 후 웹뷰를 호출해봐도 똑같습니다.

document.getElementsByTagName("head")[0].appendChild(e),e=null}}}function e(){for(;i[0];)i.shift()();t.readyState=2}var t=kakao.maps=kakao.maps||{};if(void 0===t.readyState)t.onloadcallbacks=[],t.readyState=0;else if(2===t.readyState)return;t.URI_FUNC={ROADMAP:function(a,n,e){return"map.daumcdn.net/map_k3f_prod/bakery/image_map_png/PNGSD01/v20_gjbza/"+e+"/"+n+"/"+a+".png"},HYBRID:function(a,n,e){
return"map.daumcdn.net/map_k3f_prod/bakery/image_map_png/PNGSD_SKYH01/v19_1unik/"+e+"/"+n+"/"+a+".png"},ROADVIEW:function(a,n,e){return"map.daumcdn.net/map_k3f_prod/bakery/image_map_png/PNGSD_RV01/v12_y10wr/"+e+"/"+n+"/"+a+".png"},BICYCLE:function(a,n,e){return"map.daumcdn.net/map_k3f_prod/bakery/image_map_png/PNGSD_BIKE01/v09_oni84/"+e+"/"+n+"/"+a+".png"},USE_DISTRICT:function(a,n,e){return"map.daumcdn.net/map_k3f_prod/bakery/image_map_png/PNGSD_CAD01/v12_myq1n/"+e+"/"+n+"/"+a+".png"},
SR:function(a,n,e){return"map.daumcdn.net/map_k3f_prod/bakery/image_map_png/PNGSD_SR01/v25_h4pkx/"+e+"/"+n+"/"+a+".png"},BBOUND:function(a,n,e){return"map.daumcdn.net/map_k3f_prod/bakery/image_map_png/PNGSD_BBOUND01/v10_bkdbd/"+e+"/"+n+"/"+a+".png"},HBOUND:function(a,n,e){return"map.daumcdn.net/map_k3f_prod/bakery/image_map_png/PNGSD_HBOUND01/v11_njtls/"+e+"/"+n+"/"+a+".png"},TRAFFIC:function(a,n,e){return"r.maps.daum-img.net/mapserver/file/realtimeroad/L"+e+"/"+n+"/"+a+".png"},
ROADMAP_HD:function(a,n,e){return"map.daumcdn.net/map_k3f_prod/bakery/image_map_png/PNG01/v26_gxuw0/"+e+"/"+n+"/"+a+".png"},HYBRID_HD:function(a,n,e){return"map.daumcdn.net/map_k3f_prod/bakery/image_map_png/PNG_SKYH01/v18_sfidn/"+e+"/"+n+"/"+a+".png"},ROADVIEW_HD:function(a,n,e){return"map.daumcdn.net/map_k3f_prod/bakery/image_map_png/PNG_RV01/v12_16ddu/"+e+"/"+n+"/"+a+".png"},BICYCLE_HD:function(a,n,e){
return"map.daumcdn.net/map_k3f_prod/bakery/image_map_png/PNG_BIKE01/v09_bp3hx/"+e+"/"+n+"/"+a+".png"},USE_DISTRICT_HD:function(a,n,e){return"map.daumcdn.net/map_k3f_prod/bakery/image_map_png/PNG_CAD01/v15_jyzdm/"+e+"/"+n+"/"+a+".png"},SR_HD:function(a,n,e){return"map.daumcdn.net/map_k3f_prod/bakery/image_map_png/PNGSD_SR01/v25_h4pkx/"+e+"/"+n+"/"+a+".png"},BBOUND_HD:function(a,n,e){return"map.daumcdn.net/map_k3f_prod/bakery/image_map_png/PNG_BBOUND01/v10_oazzz/"+e+"/"+n+"/"+a+".png"},
HBOUND_HD:function(a,n,e){return"map.daumcdn.net/map_k3f_prod/bakery/image_map_png/PNG_HBOUND01/v11_b2unm/"+e+"/"+n+"/"+a+".png"},TRAFFIC_HD:function(a,n,e){return"r.maps.daum-img.net/mapserver/file/realtimeroad_hd/L"+e+"/"+n+"/"+a+".png"}},t.VERSION={ROADMAP_SUFFIX:"",SKYVIEW_VERSION:"160114",SKYVIEW_HD_VERSION:"160107"},t.RESOURCE_PATH={ROADVIEW_AJAX:"//t1.daumcdn.net/roadviewjscore/core/css3d/200204/standard/1580795088957/roadview.js",
ROADVIEW_CSS:"//t1.daumcdn.net/roadviewjscore/core/openapi/standard/230727/roadview.js"};for(var r,p="https:"==location.protocol?"https:":"http:",m="",d=document.getElementsByTagName("script"),_=d.length;r=d[--_];)if(/\/(beta-)?dapi\.kakao\.com\/v2\/maps\/sdk\.js\b/.test(r.src)||/\/map_js_init\/open4\.test\.js\b/.test(r.src)||/\/map_js_init\/open4\.cbt\.js\b/.test(r.src)){m=r.src;break}d=null;var i=t.onloadcallbacks,o=["v3"],u="",c={v3:p+"//t1.daumcdn.net/mapjsapi/js/main/4.4.14/kakao.js",
services:p+"//t1.daumcdn.net/mapjsapi/js/libs/services/1.0.2/services.js",drawing:p+"//t1.daumcdn.net/mapjsapi/js/libs/drawing/1.2.6/drawing.js",clusterer:p+"//t1.daumcdn.net/mapjsapi/js/libs/clusterer/1.0.9/clusterer.js"},s=function(a){var n={};return a.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(a,e,t){n[e]=t}),n}(m);u=s.appkey,u&&(t.apikey=u),t.version="4.4.14";var g=s.libraries;if(g&&(o=o.concat(g.split(","))),"false"!==s.autoload){for(var _=0,k=o.length;_<k;_++)!function(a){
a&&document.write('<script charset="UTF-8" src="'+a+'"><\/script>')}(c[o[_]]);t.readyState=2}t.load=function(n){switch(i.push(n),t.readyState){case 0:t.readyState=1,a();break;case 2:e()}}}();```

js키도 확인했고, 사이트 도메인도 라이브서버지만 정상적으로 입력했는데 어떤 부분이 실수가 있는지 가늠이 되질 않습니다.
확인 요청 드립니다.
2

해당 URL은 JS SDK 스크립트를 로드하는 주소입니다.
WebView로 지도를 띄우시려면 별도로 지도 HTML 화면을 구성해서 보여주거나
지도를 표시하는 파일이 도메인에 올라간 상태라면 도메인을 연결하는 방법이 있습니다.

단순 지도 앱을 연결하려면 앱은 URL Scheme으로 제공하고 있으니 참고 부탁드립니다.
Android: URL Scheme | KakaoMaps SDK v2 for Android
iOS: 카카오맵 URL Scheme | KakaoMapsSDK v.2 for iOS

3

html로 화면을 구성한다는 말은 아래와 같은 코드구성이 맞는건가요?
맞다면 해당 코드도 이슈가 있는데 이부분 또한 url을 잘못 입력한 건가요??
현재는 아래와 같이 작업을 하면 흰화면만 나오는 상황입니다.

import React from "react";
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={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'); 
                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 () => {
    return (
        <WebView
            originWhitelist={["*"]}
            source={{
                html,
            }}
            style={{ borderWidth: 1 }}
        />
    );
};
4

네 맞습니다.
제 경우는 첨부 주신 코드와 SafeAreaView에 스타일을 적용한 코드(아래 첨부 코드) 모두 정상 동작이 확인됩니다.
우선 SafeAreaView 컴포넌트에 flex 스타일을 설정하고 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=앱키"></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); //지도 생성 및 객체 리턴

        })();
    </script>
</body>
</html>    `;

const App = () => {
  return (
    <SafeAreaView style={{flex: 1}}>
      <WebView source={{html: html}} />
    </SafeAreaView>
  );
};

export default App;
5

직접 테스트까지 해주셔서 감사합니다 덕분에 안드로이드는 지도가 보여집니다.

하지만 ios는 시뮬레이터, 실기기 2개다 표시가 되지 않습니다. ios관련해서 외부컨텐츠 허용하는 값을 넣어보기도했는데 표시는 되지 않더라구요.

혹시 웹뷰옵션으로 카카오맵 관련해서 ios만 별개로 설정해야하는 옵션이 있을까요?

6

따로 설정해야 하는 옵션은 없습니다.
환경적인 문제로 iOS에서 동작이 되지 않는 것 같아요.
iOS 버전에 맞는 WebView를 사용 중인지 확인해 주시고 http로 접속 중이라면 http 허용으로 ATS 설정을 변경해주셔야 합니다.

7

감사합니다 Info.plist 에서 allow arbitrary 설정을 추가하니까 정상적으로 표시가 됩니다

8

혹시 저도 완전히 똑같이 해서 apk파일에선 되는데 ios에선 안보이는 증상이 있어서요…ㅜㅜ allow arbitrary를 yes로
해서 http 요청을 전부 풀어주면 되는건가요??