집 > 기사 > 웹 프론트엔드 > React Native와 WebView 간의 통신 정보

React Native와 WebView 간의 통신 정보

小云云원래의: 2018-02-01 13:17:482192검색

WebView는 ReactNative의 컴포넌트입니다. 네이티브 WebView를 생성하고 웹페이지에 접근할 수 있습니다. 이번 글에서는 주로 React Native와 WebView 간의 통신을 위한 샘플 코드를 소개하고 있으니, 참고하겠습니다. 지금 여러분과 공유해 보세요. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

때로는 RN과 WebView 사이에 통신을 해야 하거나 데이터를 전송하거나 메시지 알림을 보내야 할 때가 있습니다.

1: WebView는 RN에 데이터를 보냅니다.

먼저 웹뷰를 만듭니다.

<WebView
  ref={&#39;webview&#39;}
  source={require(&#39;./index.html&#39;)}
  style={{width: 375, height: 220}}
  onMessage={(e) => {
    this.handleMessage(e)
  }}
  
/>

onMessage 메소드가 있는 것을 볼 수 있습니다.

onMessage 함수

이 속성은 window.postMessage 메소드가 웹 페이지 내부에서 호출될 때 트리거될 수 있습니다. webview.웹 페이지와 RN 간의 데이터 교환을 구현하는 기능입니다. 이 속성을 설정하면 postMessage 전역 함수가 webview에 삽입되고 이미 존재할 수 있는 동일한 이름의 구현을 덮어씁니다.

웹 페이지의 window.postMessage는 RN 측의 이벤트 객체, 즉 event.nativeEvent.data에 캡슐화된 하나의 매개변수 데이터만 전송합니다. 데이터는 문자열만 될 수 있습니다.

이 방법은 Webview(즉, html)에서 데이터를 수신하는 데 사용되는 것을 볼 수 있습니다.

내부 구현은 수신된 데이터를 처리하는 것입니다.

handleMessage(e) {
  this.setState({webViewData: e.nativeEvent.data});
}

e.nativeEvent .data는

이 작업만으로는 Rn 측의 처리만으로는 충분하지 않습니다. 또한 html로 데이터를 보내는 방법도 작성해야 합니다.

var data = 0;

function sendData(data) {
  if (window.originalPostMessage) {
    window.postMessage(data);
  } else {
    throw Error(&#39;postMessage接口还未注入&#39;);
  }
}
document.getElementById(&#39;button&#39;).onclick = function () {
  data += 100;
  sendData(data);
}

window.postMessage 는 RN으로 데이터를 보냅니다.

두 번째: RN이 Webview로 데이터를 보냅니다:

먼저 데이터를 보내는 방법을 정의합니다:

sendMessage() {
  this.refs.webview.postMessage(++this.data);
}

이 단계는 매우 간단합니다.
원하는 데이터를 작성하기만 하면 됩니다. 매개변수로 보내기

그런 다음 html로 데이터를 수신하는 해당 방법이 있어야 합니다.

window.onload = function () {
  document.addEventListener(&#39;message&#39;, function (e) {
    document.getElementById(&#39;data&#39;).textContent = e.data;
  });

}

이것은 Rn과 Webview 간의 통신을 실현할 수 있습니다.

나중에 넣습니다. 소스 코드:

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p style="text-align: center">
  <button id="button">发送数据到react native</button>
  <p style="text-align: center">收到react native发送的数据: <span id="data"></span></p>
</p>
<script>
  var data = 0;

  function sendData(data) {
    if (window.originalPostMessage) {
      window.postMessage(data);
    } else {
      throw Error(&#39;postMessage接口还未注入&#39;);
    }
  }

  window.onload = function () {
    document.addEventListener(&#39;message&#39;, function (e) {
      document.getElementById(&#39;data&#39;).textContent = e.data;
    });
    document.getElementById(&#39;button&#39;).onclick = function () {
      data += 100;
      sendData(data);
    }
  }
</script>
</body>
</html>

web.js:

/**
 * Created by 卓原 on 2017/8/17.
 * zhuoyuan93@gmail.com
 */
import React from &#39;react&#39;;
import {
  View,
  Text,
  StyleSheet,
  WebView
} from &#39;react-native&#39;;

export default class Web extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      webViewData: &#39;&#39;
    }
    this.data = 0;
  }

  sendMessage() {
    this.refs.webview.postMessage(++this.data);
  }

  handleMessage(e) {
    this.setState({webViewData: e.nativeEvent.data});
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={{width: 375, height: 220}}>
          <WebView
            ref={&#39;webview&#39;}
            source={require(&#39;./index.html&#39;)}
            style={{width: 375, height: 220}}
            onMessage={(e) => {
              this.handleMessage(e)
            }}

          />

        </View>
        <Text>来自webview的数据 : {this.state.webViewData}</Text>
        <Text onPress={() => {
          this.sendMessage()
        }}>发送数据到WebView</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 22,
    backgroundColor: &#39;#F5FCFF&#39;,
  },

});

React Native와 WebView 간의 통신 정보

관련 기사