[RN] WebView와 Web 통신하기

 

 

 

 

 

 

 

 

웹뷰와 웹브라우저 간 통신 방법 알아보기!

 

 

 

 

728x90

 

 

 

 

1. 웹뷰 -> 웹

- RN

const webviewRef = useRef(null);


// React Native에서 데이터를 웹뷰로 보내는 함수
const sendDataToWebView = (data) => {
  console.log(data);
  const serializedData = JSON.stringify(data); // 객체를 문자열로 직렬화
  webviewRef.current.postMessage(serializedData);
};

 

 

- Web

// 웹뷰에서 React Native로부터 데이터를 받는 함수
window.addEventListener("message", (event) => {
  const receivedData = JSON.parse(event.data); // 문자열을 객체로 파싱
  console.log(receivedData);
  // 이후 작업 수행
});

 

 

 

 

2. 웹 -> 웹뷰

- Web

// RN으로 메시지 전송
window.postMessage(JSON.stringify({ type: 'message', content: 'Hello from the web!' }));

 

 

- RN

<WebView
    source={{ uri: 'your_webpage_url' }}
    onMessage={(event) => {
        const message = JSON.parse(event.nativeEvent.data);
        console.log('Message from web:', message);
        // 이제 이 메시지를 사용하여 원하는 작업을 수행할 수 있습니다.
    }}
/>