React-native와 WebView 통신하기

웹뷰로 하이브리드 앱을 만들기 위해선 모바일 환경에서 일어난 일들을 웹뷰에 전달하여 저장하거나 처리하는 과정이 필요합니다.

WebView(React) -> React-native

- WebView(React)

window.ReactNativeWebview.postMessage('알림')

• 리액트에서 전달하고자 하는 정보를 string 형식으로 전달합니다.
• 객체나 배열을 전달할 경우 JSON.stringify로 변환하여 전달합니다.

- React-native

const onMessage = (e) => {
		const data = e.nativeEvent.data // 알림
        Alert.alert(data)
	}

<WebView
  source={{uri: your url}}
  onMessage={onMessage}
/>

• WebView 컴포넌트의 onMessage 속성으로 받아옵니다.
• 객체나 배열을 받아올 경우 JSON.parse로 변환하여 가져오면 됩니다.

React-native -> WebView(React)

- React-native

const webViewRef = useRef(null)

useEffect(()=>{
	webViewRef.current.postMessage('알림')
},[])

<WebView
  ref={webViewRef}
  source={{uri: your url}}
/>

• webView에 ref 속성을 지정한 후 webViewRef.current.postMessage()로 데이터를 보냅니다.

- WebView(React)

// ios
window.addEventListener('message',(e) => alert(e.data) 

// android
document.addEventListener('message',(e) => alert(e.data) );

• ios와 android는 최상위 객체가 달라 꼭 구분하여 받아와야 합니다.