suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung von Kommunikationsbeispielen zwischen React Native und Webview

Detaillierte Erläuterung von Kommunikationsbeispielen zwischen React Native und Webview

巴扎黑
巴扎黑Original
2017-09-26 09:36:133263Durchsuche

In diesem Artikel wird hauptsächlich der Beispielcode für die Kommunikation zwischen React Native und Webview vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick darauf.

WebView ist eine Komponente in ReactNative. Es kann ein natives WebView erstellen, mit dem auf eine Webseite zugegriffen werden kann.

Manchmal RN muss mit WebView kommunizieren oder Daten übertragen oder Nachrichtenbenachrichtigungen senden. Zu diesem Zeitpunkt müssen die folgenden Kenntnisse verwendet werden:

1: WebView an RN Daten vom Ende senden:

Zuerst erstellen wir eine Webansicht:


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

Das können Sie sehen Es gibt eine onMessage-Methode,

onMessage-Funktion

Wenn die window.postMessage-Methode auf der Webseite in der Webansicht aufgerufen wird, kann die diesem Attribut entsprechende Funktion ausgelöst und dadurch realisiert werden Datenaustausch zwischen der Webseite und RN. Beim Festlegen dieser Eigenschaft wird eine globale PostMessage-Funktion in die Webansicht eingefügt und überschreibt die möglicherweise bereits vorhandene Implementierung mit demselben Namen.

Window.postMessage auf der Webseite sendet nur einen Parameterdatenwert, der im Ereignisobjekt auf der RN-Seite gekapselt ist, nämlich event.nativeEvent.data. Daten können nur eine Zeichenfolge sein.

Es ist ersichtlich, dass diese Methode zum Empfangen von Daten aus Webview (d. h. HTML) verwendet wird.

Die interne Implementierung verarbeitet die empfangenen Daten: 


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

e.nativeEvent.data sind die Daten, die aus der Webansicht gesendet werden

Dies allein reicht nicht aus. Dies ist nur die Verarbeitung auf der Rn-Seite. Wir müssen auch eine Methode zum Senden von Daten in HTML schreiben: 


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 dient zum Senden von Daten an RN.

Zweitens: RN sendet Daten an Webview:

Definieren Sie zunächst eine Methode zum Senden von Daten:


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

Dieser Schritt ist sehr einfach.
Schreiben Sie einfach die Daten, die Sie senden möchten, als Parameter in diese Methode.

Dann muss es einen entsprechenden Datenempfang in der HTML-Methode geben: 


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

}

Dies kann die Kommunikation zwischen Rn und Webview realisieren. Nach

fügen Sie den Quellcode ein: 


<!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;,
  },

});

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von Kommunikationsbeispielen zwischen React Native und Webview. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterungen zu den Funktionen gelten und rufen in JS aufNächster Artikel：Detaillierte Erläuterungen zu den Funktionen gelten und rufen in JS auf

In Verbindung stehende Artikel

Mehr sehen