RN: webview message

React Native 와 Webview 간 서로 소통하기 위에
메시지 통신을 사용한다

RN -> WebView

ReactNative postMessage

const MyWebView = () => {
  const webviewRef = useRef<WebView>(null);
  const [data, setData] = useState({ message: 'Hello from React Native!' });

  const handleButtonClick = () => {
    if (webviewRef.current) return
    webviewRef.current.injectJavaScript(`
      window.postMessage(${JSON.stringify(data)});
    `);
    }
  

  return (
    <>
      <WebView
        ref={webviewRef}
        source={{ uri: 'https://example.com' }}
        injectedJavaScriptBeforeContentLoaded={() => {
          // 초기에 실행할 JavaScript 코드
        }}
      />
      <Button title="Send Data" onPress={handleButtonClick} />
    </>
  );
};

webview mount 시 한 번만 메시지를 보내고 싶다면
WebView 의 onLoadEnd 속성을 사용할 수 있다

WebView eventListener message

웹뷰에서 받기

useEffect(() => {
    if (typeof window === 'undefined') return
    const listener = (event: MessageEvent) => {
      try {
        const data = JSON.parse(event.data)
        if (data[key]) setValue(data[key])
      } catch (error) {
        console.error('Failed to parse message:', error)
      }
    }
    window.addEventListener('message', listener)

    return () => {
      window.removeEventListener('message', listener)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

WebView -> RN

window.ReactNativeWebView.postMessage

useEffect(() => {
    if (typeof window === 'undefined') return
    if (!window.ReactNativeWebView) return
    const message = JSON.stringify({
      [key]: value,
    })
    window.ReactNativeWebView.postMessage(message)
  }, [value, key])

ReactNative onMessage

WebView 의 onMessage 속성 사용

  const handleOnMessage = async (event: WebViewMessageEvent) => {
    if (event.nativeEvent.data) return
  }
return (
	 <WebView
        onMessage={handleOnMessage}
      />
)