쿠팡, 옥션 등의 쇼핑몰에서는 모바일웹을 개발한 다음 iOS, Android앱의 웹뷰를 통해 모바일웹을 그대로 사용하는 것을 볼 수 있습니다. 지금부터 React Native 웹뷰를 사용해서 웹뷰에 간단한 웹페이지를 띄워보고 네이티브앱과 웹페이지간의 메세지 통신을 해보겠습니다
1. 웹페이지 HTML
<body>의 onLoad 이벤트로 Android에서 테스트해보았을 때 postMessage가 장동하지 않았습니다. 그래서 setTimeout을 사용했고 iOS와 Android에서 멋지게 작동했습니다.
document.addEvnetListener
웹뷰에서 메시지 전달되기 전까지 대기하고 있다가 webview.postMessage를 통해 메세지가 전송되면 정의한 함수가 동작됩니다.
window.postMessage
웹페이지에서 웹뷰로 메세지를 전송하는 기능을 합니다.
2. React Native 웹뷰
<WebView> source 속성
uri 에는웹페이지의 URI을 입력합니다. origin 은 웹뷰에서 허용할 웹페이지 도메인 주소입니다. uri 의 도메인을 입력합니다.
onMessage
웹페이지의 addEvnetListener와 동일한 기능을 합니다. 웹페이지에서 메세지가 전송되면 onMessage가 감지하여 _onMessage 함수를 실행합니다.
webview.postMessage
웹페이지의 postMessage와 동일한 기능을 합니다. 웹뷰에서 웹페이지로 메세지를 전송합니다.
여기까지 웹페이지와 네이티브 앱간의 메세지 전송에 웹뷰를 사용했습니다.
Expo SDK 32 버전에서는 onMessage, postMessage메세지 전송이 안됩니다. app.json에서 SDK버전을 다운그레이드 하고 npm install을 완료하면 멋지게 동작합니다.
Expo 디버그 모드로 개발하면 로딩이 느려 간혹 페이지 로딩 타임아웃이 발생합니다. 웹뷰를 개발할 때에는 디버그 모드 비활성화를 추천합니다.
참고.
