React Native Webview 사용기
들어가는 말
RN에서 Webview로는 postMessage로 값을 보낼 수 있으며
Webview에서 RN로는 window.ReactNativeWebView.postMessage로 값을 보낼 수 있습니다.
위와 같은 식으로 RN과 Webview간에 양방향 통신이 가능합니다.
React Native에서의 구성
import React, { useRef } from 'react'
import WebView from 'react-native-webview'
const onMessage = (e) => {
const event = JSON.parse(e.nativeEvent.data)
console.log('onMessage', event)
}
const WebViewContainer = () => {
return <WebView ref={webViewRef} onMessage={onMessage} />
}
export default WebViewContainer먼저 React Native에서는 위와 같이 onMessage를 설정하고 WebView -> RN으로 보내주는 값을 받을 준비를 합니다.
웹뷰(React)에서의 구성
웹뷰를 이룰 수 있는 것들은 많은 것으로 만들 수 있지만 저는 React로 구성하였으니 React로 예시를 들겠습니다.
import React, { useEffect } from 'react'
const Component = () => {
const onMessageHandler = (e) => {
const event = JSON.parse(e.data)
window.ReactNativeWebView.postMessage(JSON.stringify({ event: event }))
}
useEffect(() => {
const isUIWebView = () => {
return navigator.userAgent
.toLowerCase()
.match(/\(ip.*applewebkit(?!.*(version|crios))/)
}
const receiver = isUIWebView() ? window : document
receiver.addEventListener('message', onMessageHandler)
return () => {
receiver.removeEventListener('message', onMessageHandler)
}
})
return (
<div>
<p>Hello</p>
<button>Button</button>
</div>
)
}
export default ComponentonMessageHandler를 위와 같이 설정하여서 RN -> Webview로 주는 값을 받을 준비를 합니다.
예시
먼저 간단하게 RN->Webview로 값을 넘겨서 글자의 텍스트를 변화를 주는 예시를 들어보겠습니다.
먼저 RN 코드입니다.
import React, { useRef } from 'react'
import WebView from 'react-native-webview'
const onMessage = (e) => {
const event = JSON.parse(e.nativeEvent.data)
console.log('onMessage', event)
}
const onLoadProgress = ({ nativeEvent }) => {
if (nativeEvent.progress === 1) {
if (webViewRef.current) {
webViewRef.current.postMessage(
JSON.stringify({ changeText: 'World' }),
'*'
)
}
}
}
const WebViewContainer = () => {
return (
<WebView
ref={webViewRef}
onMessage={onMessage}
onLoadProgress={onLoadProgress}
/>
)
}
export default WebViewContainer웹뷰가 다 로딩된 후에 postMessage로 값을 보내주도록 하였습니다. postMessage에는 string만 보낼 수 있기 때문에 JSON.stringify로 변환하여서 보내줍니다.
import React, { useEffect, useState } from 'react'
const [textValue, setTextValue] = 'Hello'
const Component = () => {
const onMessageHandler = (e) => {
const event = JSON.parse(e.data)
window.ReactNativeWebView.postMessage(JSON.stringify({ event: event }))
if (event.changeText) {
setTextValue(event.changeText)
}
}
useEffect(() => {
const isUIWebView = () => {
return navigator.userAgent
.toLowerCase()
.match(/\(ip.*applewebkit(?!.*(version|crios))/)
}
const receiver = isUIWebView() ? window : document
receiver.addEventListener('message', onMessageHandler)
return () => {
receiver.removeEventListener('message', onMessageHandler)
}
})
return (
<div>
<p>{textValue}</p>
<button>Button</button>
</div>
)
}
export default ComponentWebView(React) 코드입니다. RN에서 보낸 메세지를 만들어둔 onMessageHandler로 통해서 받은 후 위와 같이 처리합니다.
다음으로는 Webview에서 RN으로 값을 보내는 예시를 진행하겠습니다.
import React, { useEffect, useState } from 'react'
const [textValue, setTextValue] = 'Hello'
const Component = () => {
const onMessageHandler = (e) => {
const event = JSON.parse(e.data)
window.ReactNativeWebView.postMessage(JSON.stringify({ event: event }))
if (event.changeText) {
setTextValue(event.changeText)
}
}
const onClick = (e) => {
e.preventdefault()
window.ReactNativeWebView.postMessage(JSON.stringify({ method: 'click' }))
}
useEffect(() => {
const isUIWebView = () => {
return navigator.userAgent
.toLowerCase()
.match(/\(ip.*applewebkit(?!.*(version|crios))/)
}
const receiver = isUIWebView() ? window : document
receiver.addEventListener('message', onMessageHandler)
return () => {
receiver.removeEventListener('message', onMessageHandler)
}
})
return (
<div>
<p>{textValue}</p>
<button onClick={onClick}>Button</button>
</div>
)
}
export default Component먼저 WebView(React) 코드입니다. 버튼 누를시 WebView -> RN으로 값이 가도록 하였습니다.
window.ReactNativeWebView.postMessage도 string 형태로 값을 보내기에 JSON.stringify로 변환해주어야 합니다.
import React, { useRef } from 'react'
import WebView from 'react-native-webview'
const onMessage = (e) => {
const event = JSON.parse(e.nativeEvent.data)
console.log('onMessage', event)
if (event.method === 'click') {
//이벤트 발생
}
}
const onLoadProgress = ({ nativeEvent }) => {
if (nativeEvent.progress === 1) {
if (webViewRef.current) {
webViewRef.current.postMessage(
JSON.stringify({ changeText: 'World' }),
'*'
)
}
}
}
const WebViewContainer = () => {
return (
<WebView
ref={webViewRef}
onMessage={onMessage}
onLoadProgress={onLoadProgress}
/>
)
}
export default WebViewContainerRN 코드입니다. onMessage에 WebView로부터 보낸 PostMessage를 받을 수 있으며 위의 코드와 같이 받을 수 있습니다.
