리액트 네이티브 WebView iOS에서 postMessage가 동작하지 않을 때 해결하는 방법 (React Native WebView postMessage does not work)

리액트 네이티브(React Native, RN) Expo에서 웹뷰(Webview) 작업을 할 때, 앱과 웹 사이에서 커뮤니케이션을 하기 위해서 postMessage 메서드를 활용합니다. 하지만 안드로이드에서 postMessage 처리하는 방식과 iOS에서 postMessage를 처리하는 방식이 조금 다릅니다.

의존성 버전

"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz"

"expo": "~36.0.0"

해결방법

안드로이드 플랫폼에서는 document 객체에 message 이벤트 리스너를 등록하고, iOS 플랫폼에서는 window 객체에 message 이벤트 리스너를 등록하면 해결됩니다.

안드로이드(Android)

document.addEventListener("message", () => { alert('성공')});

iOS

window.addEventListener("message", () => { alert('성공')});