개발/React Native

리액트 네이티브 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..

개발/React Native

[리액트 네이티브(React Native, RN)] 앱과 웹뷰(Webview) 사이에서 인터페이스를 활용해 커뮤니케이션(통신)하는 방법(react native communicate between app webview)

리액트 네이티브(React Native, RN)에서 코드를 구현하다보면 웹뷰(Webview)와 커뮤니케이션을 해야되는 상황이 생기는데요. 이때 리액트 네이티브에서는 인터페이스(Interface)를 활용해서 웹뷰와 커뮤니케이션(통신)을 할 수 있게 제공해주는 기능들이 존재합니다. 이번 포스팅에서는 이러한 기능을 소개하고, 앱 부분에서 처리하는 부분과 웹뷰에서 처리하는 부분을 나눠서 설명을 하도록 하겠습니다. 웹뷰 -> 앱 웹뷰(Webview) / 웹 코드 onMessage 이벤트를 활용한 간단한 예시를 다뤄보도록 할까요? onMessage 이벤트가 발생하는 조건은 웹뷰에서 ReactNativeWebView.postMessage가 실행되어야 됩니다. ReactNativeWebView.postMessage의 ..