Über die Kommunikation zwischen React Native und Webview-js-Tutorial-php.cn

Über die Kommunikation zwischen React Native und Webview

小云云

Freigeben： 2018-02-01 13:17:48

Original

2172 Leute haben es durchsucht

WebView ist eine Komponente in ReactNative. Sie kann eine native WebView erstellen und für den Zugriff auf eine Webseite verwendet werden. In diesem Artikel wird hauptsächlich der Beispielcode für die Kommunikation zwischen ReactNative und WebView vorgestellt Ich werde es jetzt mit Ihnen teilen, auch als Referenz für alle. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Manchmal müssen wir zwischen RN und WebView kommunizieren oder Daten übertragen oder Nachrichtenbenachrichtigungen senden. Zu diesem Zeitpunkt müssen wir die folgenden Kenntnisse verwenden.

1: WebView sendet Daten an das RN-Ende:

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)
  }}
  
/>

Nach dem Login kopieren

Sie können sehen, dass es eine onMessage-Methode gibt,

onMessage-Funktion

Die diesem Attribut entsprechende Funktion kann ausgelöst werden, wenn die window.postMessage-Methode aufgerufen wird die Webseite innerhalb der Webansicht, wodurch der Datenaustausch zwischen Webseiten und RN realisiert wird. 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});
}

Nach dem Login kopieren

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);
}

Nach dem Login kopieren

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);
}

Nach dem Login kopieren

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;
  });

}

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

});

Nach dem Login kopieren

Verwandte Empfehlungen:

JS klickt interaktiv auf das Bild in WKWebView und zeigt eine Vorschau des Beispiels an

Detaillierte Erläuterung der WebView-Wissenspunkte

Detaillierte Beschreibung Erklärung zum Laden von HTML-Code mit WebView

Das obige ist der detaillierte Inhalt vonÜber die Kommunikation zwischen React Native und Webview. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!