개발자

react-native-webview

2024년 06월 18일조회 151

카카오 지도를 webview로 표현하는데 디바이스에 나오지 않네요, 구글링해서 다 찾아봐서 적용시켜 봤는데 어떻게 해야할지 감이 안옵니다... 카카오 앱등록에서 https://localhost:8081 적용하고 javascript api key를 appkey에다가 했는데 왜 그럴까요 -_-;;

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 1

devwoo님의 프로필 사진

해결했습니다, 상위 컴포넌트로 감싸고 flex:1 를 주면서 했네요 ㅎㅎ;

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 06월 18일

카카오 지도를 React Native WebView에서 사용하는데 문제가 있다면, 몇 가지 확인해 보실 부분이 있습니다. 1. **웹 설정**: 카카오 개발자 웹 사이트에 접속해서 등록한 애플리케이션의 웹 플랫폼 설정이 제대로 되어 있는지 확인해 주세요. 특히, "Site Domain"과 "Redirect Path"가 맞게 입력되었는지 확인하세요. Site domain에는 localhost를 입력하셨나요? 그리고 Redirect Path는 '/'로 해두셨나요? 2. **API Key**: 사용하신 API key가 JavaScript용 key인지 확인해 주세요. JavaScript key와 native app key는 다르므로 혼동하지 않도록 주의하세요. 3. **WebView 내 코드**: WebView source URL 안에 들어간 HTML/JavaScript 코드를 잘 살펴보세요. Javascript API Key를 제대로 적용하셨다면 아래와 같은 형태의 스크립트 태그가 있어야 합니다. ``` <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=YOUR_JAVASCRIPT_KEY"></script> ``` 여기서 "YOUR_JAVASCRIPT_KEY" 부분을 본인의 javascript API Key로 교체해야 합니다. 4. **링크** : WebView에서 보여줄 웹 페이지 링크가 올바른 링크인지 확인해주세요. 이 모든 것에 문제가 없다면, 기기에서 네트워크 연결 상태를 확인하거나, 다른 디바이스에서 테스트해 보세요. 이 경우에도 문제가 해결되지 않는다면, WebView가 아닌 react-native-maps같은 대체 제품을 고려해 보실 수도 있습니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!