[React Naitve] RN - WEBVIEW (웹뷰) 사용법

안드로이드 편

 

Part 1. 웹뷰에서 React Native로 메세지 데이터 보내기

 

Step 1. 설치하기

웹뷰를 사용 할 수 있도록 아래 명령어를 통해 라이브러리를 설치해 주시면 됩니다.

npm i react-native-webview

 

Setp 2. 웹뷰에서 rn으로 데이터 송신(전체 코드)

import {View, Alert} from 'react-native';
import React, {useRef} from 'react';
import {WebView} from 'react-native-webview';

export default function App() {
  const html = `
    <script>
      function send(){
        window.ReactNativeWebView.postMessage('결과 값 출력');
      }
    </script>
    <button style="width: 400px; height: 400px; font-size: 50px" onclick="send()">Send</button>
  `;

  const webviewRef = useRef();

  /** 웹뷰 ref */
  const handleSetRef = _ref => {
    webviewRef.current = _ref;
  };

  //웹뷰에서 rn으로 값을 보낼때 함수
  const handleOnMessage = e => {
    // postMessage 담겨있는 결과 값이 웹뷰에서 값을 출력
    console.log('콘솔', e.nativeEvent.data);
    Alert.alert(e.nativeEvent.data);
  };

  return (
    <View style={{flex: 1}}>
      <WebView onMessage={handleOnMessage} source={{html}} ref={handleSetRef} />
    </View>
  );
}

onMessage

 : 웹뷰에서 보내는 데이터를 받습니다.

 

source

 : 웹 사이트 경로 입니다.

 

useRef

 : .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다.

 

Step 3. 코드 실행 결과

 

 

Part 2. React Native에서 웹뷰로 메세지 데이터 보내기

전체 코드

import {View, Alert, TouchableOpacity, Text} from 'react-native';
import React, {useRef} from 'react';
import {WebView} from 'react-native-webview';

export default function App() {
  const html = `
    <script>
      function send(){
        window.ReactNativeWebView.postMessage('결과 값 출력');
      }
      // RN에서 웹으로 데이터를 전송했을때 message이벤트가 실행됩니다.
      document.addEventListener("message", (e) => {
        alert(e.data);
      })
    </script>
    <button style="width: 400px; height: 400px; font-size: 50px" onclick="send()">Send</button>
  `;

  const webviewRef = useRef();

  /** 웹뷰 ref */
  const handleSetRef = _ref => {
    webviewRef.current = _ref;
  };

  //웹뷰에서 rn으로 값을 보낼때 함수
  const handleOnMessage = e => {
    // postMessage 담겨있는 결과 값이 웹뷰에서 값을 출력
    console.log('콘솔', e.nativeEvent.data);
    Alert.alert(e.nativeEvent.data);
  };

  // RN에서 웹뷰로 데이터를 보낼 때 사용하는 함수 추가
  const sendMessage = () => {
    const sendData = JSON.stringify({
      id: 1,
      type: '',
      name: 'ssilook',
      content: 'WebView_Test',
    });
    webviewRef.current.postMessage(sendData);
  };

  return (
    <View style={{flex: 1}}>
      <WebView onMessage={handleOnMessage} source={{html}} ref={handleSetRef} />
      <TouchableOpacity onPress={sendMessage}>
        <Text>RN에서 웹뷰로 데이터 전달</Text>
      </TouchableOpacity>
    </View>
  );
}

 

 

코드 실행 결과

 

코드를 잘 불러오는 것을 확인 할 수 있습니다.

 

코드는 전체 코드를 붙여넣으신 후 테스트 하시면 됩니다.

 

수고하셨습니다.