React Native 클라이언트와 React Native WebView 끼리 통신하기

React Native 클라이언트와 React Native WebView 끼리 통신하기

Postmessage 로 통신

React Native 와 내부 WebView 과 서로 통신이 필요할 때가 있음

RN 과 WebView 를 연결한 뒤 인터페이스를 통해 서로 데이터를 주고 받는 구조로 해결

• 순서

  1. useRef 를 이용한 RN 과 웹뷰 연결

     let webViewRef = useRef()
  
     <WebView ref={webViewRef}>
  

  useRef 를 사용하여 WebView 마킹

  1. RN 세팅 (WebView 로 데이터를 주고 받을 인터페이스)

      const handleOnMessage = ({nativeEvent:{data}}) => {
        const {type} = JSON.parse(data);
        if (type === "??") {
          webViewRef.postMessage(message)
        }
      }
      <WebView onMessage={handleOnMessage}>
  

  클라이언트에서 보내는 메세지를 처리할 함수 생성

  메세지에 따라 서비스로직 처리

  webViewRef.postmessage(message)로 WebView에 데이터 송신

  1. WebView 세팅 (RN 으로 데이터를 주고 받을 인터페이스)

      if (window.ReactNativeWebView) {
        const Listner = (e) => {
          const {type, data} = e.data
          if (type === "??") {
            window.ReactNativeWebView.postMessage(message)
          }
        }
        window.addEventListner("message", Listner)
      }
  

  window.ReactNativeWebView 는 해당 브라우저가 RNWebView 인지 아닌지 확인하는 프로퍼티

  type, data 에 따라 서비스로직 처리

  window.ReactNativeWebView.postMessage(message)로 RN에 데이터 송신

참고 : https://kyounghwan01.github.io/blog/React/react-native/react-native-webview/#rn-%E1%84%91%E1%85%B3%E1%84%85%E1%85%A9%E1%84%8C%E1%85%A6%E1%86%A8%E1%84%90%E1%85%B3-%E1%84%86%E1%85%B5%E1%86%BE-%E1%84%8B%E1%85%B0%E1%86%B8-%E1%84%87%E1%85%B2-%E1%84%85%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%87%E1%85%B3%E1%84%85%E1%85%A5%E1%84%85%E1%85%B5-%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8E%E1%85%B5