blog/React/react-native/react-native-webview/

[utterances-bot]

react-native webview 사용법, webview, rn 데이터 통신 | 기억보다 기록을

react-native webview 사용법, webview, rn 데이터 통신, react, redux, ios, android, safari, chrome, google, apple

https://kyounghwan01.github.io/blog/React/react-native/react-native-webview/

[EINCloud]

좋은글 잘보았습니다.

궁금한것이 있는데요. 위의 글에서 Webview 안에서 사용되는 웹페이지도 react (react native가 아니라 react) 같은 걸로 만들었다고 보이는데 맞는지요?

안그래도 react-native webview 내부에 react 로 만든 웹사이트가 사용될수 있는지 궁금했던터라서 이글을 보다가 문의 드립니다.

[Kyounghwan01]

좋은글 잘보았습니다.

궁금한것이 있는데요. 위의 글에서 Webview 안에서 사용되는 웹페이지도 react (react native가 아니라 react) 같은 걸로 만들었다고 보이는데 맞는지요?

안그래도 react-native webview 내부에 react 로 만든 웹사이트가 사용될수 있는지 궁금했던터라서 이글을 보다가 문의 드립니다.

네 안녕하세요! rn webview 내부에는 react든 vue든 뭐로 만들었든 상관없이 웹브라우저라면 다 사용가능합니다.

[EINCloud]

답변 감사합니다.

그럼, 앱은 react-native 로 만들고 , 그 앱에서 webview 로 webview 안에다가 react 로 만든 사이트를 불러올 수 있는거군요.

늦은 시간에 답변 정말 감사합니다.

[choirj91]

안녕하세요. 해당 글 덕분에 너무 도움이 많이 되었습니다. 질문이 있습니다! 해당 내용을 활용하여 코드를 작성하였습니다. React Native 에서 webviewRef.postMessage({type: 'TEST', data: '안녕'}); 이런식으로 던졌고, React Web에서 document.addEventListener('message', listener); 이런 식으로 그 메세지를 받을 수 있도록 설정해주었고, 실제로, 버튼이라는 액션을 통해 반응 테스트를 해보았습니다.

버튼을 클릭하니, 웹에서 반응하여, alert 창을 띄우는 것까지는 확인했습니다. 다만, const listener = (event) => { alert('event==', event); }

이부분에서, event 속안에 아무것도 들어있지 않습니다.

무엇이 문제일까요..

환경은, 윈도우 환경에서 RN 을 띄웠고, RN Webview의 접속을 위해 ngrok을 통해 로컬 호스팅으로 로컬로 React를 띄웠습니다. ngrok 을 통한 https url 로 접속하여, 버튼 반응을 하고 있습니다만, event 안에 아무것도 들어있지 않습니다. ㅠㅠ

어떤 문제가 있을까요 ㅠㅠㅠ

[Kyounghwan01]

@choirj91 이 코드로만 봐서는 저도 파악하기가 어려울 것 같네요 예상 되는 문제는 첫번째로 버전 차이 문제일것 같습니다 (제가 이 글을 작성할 당시 버전은 0.62.2 입니다)

두번째는 rn에서 webview로 보낼때는 string 타입으로 보내야합니다. webviewRef.postMessage({type: 'TEST', data: '안녕'}); 이렇게가 아니라 webviewRef.postMessage(JSON.stringify({type: 'TEST', data: '안녕'})); 이렇게 테스트해보시길 권유드릴께요!

감사합니다!!

[aid12345]

안녕하세요. 해당 포스트 잘 읽어보았습니다.

하나 질문드리고 싶은내용이 있습니다. 현재 저는 WebView > RN으로 통신하는 문제에 대해서 질문드리고싶습니다.

현재 WebView에서

function Move() { window.ReactNativeWebView.postMessage(“test”); } 해당 버튼을 생성하여 모바일로 받아 분기처를 하는데,

Android 에서는 해당 버튼이 잘 먹히나… IOS에서는 먹히질 않는 경우가 발생하였습니다…

버튼처리시, alert창을 넣어서 확인해본결과. 버튼클릭은 되는데, 해당버튼에 저 test문구를 읽지못하여, IOS에서 동작이 되지않는경우인데요…

해당 경우에는 WebView에서 RN으로 가는 방식이 잘못된걸까요?? 아니면 RN에서 받는 방식이 잘못된 것일까요??

PS. injectedJavaScript 도 먹히지않습니다..

[Kyounghwan01]

@aid12345 PostMessage 내부에 JSON.stringify({ type: "test" }) 이런 형식으로 데이터를 넣어보시겠어요??

[junghan92]

react에서 만든프로젝트를 웹뷰로 출력하면 예를들어 input같은경우는 어떻게 될까요? 안드로이드 ios의 키보드타입...

[Kyounghwan01]

@junghan92 ios는 사파리에서 볼수있는 키보드가, and에서는 내장 브라우저에 맞는 키보드가 나옵니다