React Native Sample Code for Communication with WebVIEW

WebView is a component in ReactNative, which can create a native webview, which can be used to access a web page.

Sometimes we need to communicate between RN and WebVIEW, or data Pass, or send a message notification. At this time, you should use the following knowledge.

react native与webview通信的示例代码 1: WebView sends data to the RN side:

First, we build a webview:


{this.handleMessage (e)}} />
   You can see that there is an OnMessage method,  
When you call the window.postMessage method in the web page inside the WebView, you can trigger this. A function corresponding to the attribute, thereby implementing data exchange between web pages and RN. Set this property while injecting a global function of a PostMessage in WebView and overrides the same name that may already exist.

Window.PostMessage of the webpage terminal only sends a parameter DATA, which is encapsulated in the EVENT object in the RN side, ie Event.nativeEvent.Data. Data can only be a string.

This can be seen that this method is to receive a method of receiving data from WebView (ie HTML).

The internal implementation is to process the received data:

HandleMessage (E) {this.setState ({WebViewData: E.NATIVEVENT.Data});}


Data is the data sent inside the WebView.


Light is not enough, this Just the process of the RN side, we also need to write a method of sending data in HTML:
 VAR DATA = 0; function sendData (data) {i (Window originalPostMessage (DATA);} else {throw error ('postmessage interface has not been injected);}}}}}}} Document.getElementByid (' Button '). OnClick = function () {data + = 100; Senddata DATA);}   


II: RN Send data to WebVIEW:


First define a method of sending data:
   
SendMessage () {this.refs.webview.postMessage (++ this.data (}

This step is simple.

Directly written as a parameter in this method as a parameter.

Then, There must be a corresponding method of receiving data in HTML:


Window.onLoad = fUNCTION () {document.addeventListener (‘Message’, Function (E) {document.getlementByid (‘data’). Textcontent = E.Data;});}

  This can realize the communication between RN and WebView.  
After the source code:



   Send data to react native 
received data sent by React Native:


VAR DATA = 0; Function Senddata (DATA) {if (Window.PostMessage) {Window.PostMessage (DATA);} else {throw error (‘PostMessage interface has not been injected ‘);}} window.onload = function () {document.addEventListener (‘ message ‘, function (e) {document.getElementById (‘ data ‘) textContent = e.data;.}); document.getElementById (‘ button ‘) .onclick = function () {DATA + = 100; Senddata (DATA);}}


Web.js:
    / ** * Created by Zhuogen on 2017/8/17. * Zhuoyuan93@gmail.com * / import react from 'React'; import {view, text, stylesheet, WebView} from ' react-native '; export default class Web extends React.Component {constructor (props) {super (props); this.state = {webViewData:' '} this.data = 0;} sendMessage () {this.refs.webview .POSTMESSAGE (++ this.data);} HandleMessage (e) {this.setState ({WebViewData: E.NATIVENT.DATA});} render () {return (   {this. HandleMessage (e)}} />   Data from WebView: {this.State.WebViewData}   {this.sendMessage ()}> Send data to WebView 

The above is all the content of this article, I hope that the learning of everyone is helpful, I hope everyone supports Tumi Cloud.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment