지금 카카오맵을 react native webview에서 사용해 보려고 하는데 지도 스크립트가 로딩이 되지 않는데 혹시 이 이유를 아시는분 있을까요?
아래는 리액트 소스 부분이고
`
import axios from ‘axios’;
import React from ‘react’;
import { useEffect } from ‘react’;
import styled from ‘styled-components’;
/*global kakao*/
const Map = styled.div`
width:5000px;
height:4000px;
margin: 1000px 1000px 0 130%;
`
const { kakao } = window;
export default () => {
useEffect(() => {
const container = document.getElementById('myMap');
const options = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 3
};
const map = new kakao.maps.Map(container, options);
}, []);
return (
<div id='myMap' style={{
width: '4000px',
height: '4000px'
}}></div>
);
}
아래는 네이티브 소스 부분입니다.
const Map = () => {
return (
<WebView
style={{ flex: 1}}
source={{ uri: "http://172.30.1.6:3000/" }}
ref={webview => this.appWebview = webview}
onMessage={this.onWebViewMessage}
javaScriptEnabled={true}
useWebKit={true}
/>
)
}
const App: () => Node = () => {
return (
<SafeAreaView style={styles.container}>
<Map/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1
},
});
그리고 요청 uri는 개발 환경에서 공용으로 쓰고 있는 공유기의 머신 IP를 기준으로 했습니다. 그리고 해당 IP에 대해서 카카오맵 API 제공가능도 등록해 놓은 상황이구요. 실제로 폰이랑 웹사이트에서는 전부 됐습니다. 사파리 크롬에서 문제 없이 동작합니다. 뭐가 문제일까요?
