Detaillierte Erläuterung von Kommunikationsbeispielen zwischen React Native und Webview-js-Tutorial-php.cn

Detaillierte Erläuterung von Kommunikationsbeispielen zwischen React Native und Webview

巴扎黑

Freigeben： 2017-09-26 09:36:13

Original

3176 Leute haben es durchsucht

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

Nach dem Login kopieren

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

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

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!