À propos de la communication entre React Native et WebView-js tutoriel-php.cn

À propos de la communication entre React Native et WebView

小云云

Libérer： 2018-02-01 13:17:48

original

2173 Les gens l'ont consulté

WebView est un composant de ReactNative. Il peut créer une WebView native et peut être utilisé pour accéder à une page Web. Cet article présente principalement l'exemple de code pour la communication entre React Native et WebView. je le partagerai avec vous maintenant, également comme référence pour tout le monde. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Parfois, nous devons communiquer entre RN et WebView, ou transférer des données, ou envoyer des notifications de message. À ce stade, nous devons utiliser les connaissances suivantes.

<.>

1 : WebView envoie des données à l'extrémité RN :

Tout d'abord, nous construisons une webview :

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

Copier après la connexion

Vous pouvez voir qu'il existe une méthode onMessage,

Fonction onMessage

La fonction correspondant à cet attribut peut être déclenchée lorsque la méthode window.postMessage est appelée dans la page Web à l'intérieur de la vue Web, réalisant ainsi l'échange de données entre les pages Web et RN. La définition de cette propriété injectera une fonction globale postMessage dans la vue Web et écrasera l'implémentation du même nom qui peut déjà exister.

Window.postMessage sur la page Web n'envoie qu'une seule donnée de paramètre, qui est encapsulée dans l'objet événement du côté RN, à savoir event.nativeEvent.data. les données ne peuvent être qu'une chaîne.

On peut voir que cette méthode est utilisée pour recevoir des données de Webview (c'est-à-dire du HTML

L'implémentation interne traite les données reçues :

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

Copier après la connexion

e.nativeEvent.data sont les données envoyées depuis la vue Web

Faire cela ne suffit pas, c'est juste le traitement. du côté Rn. Nous devons également écrire une méthode d'envoi de données en 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);
}

Copier après la connexion

window.postMessage consiste à envoyer des données à RN.

Deux : RN envoie des données à Webview :

Définissez d'abord une méthode pour envoyer des données :

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

Copier après la connexion

Cette étape est très simple.

Écrivez simplement les données que vous souhaitez envoyer en tant que paramètre dans cette méthode.

Ensuite, il doit y avoir des données de réception correspondantes dans la méthode html :

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

}

Copier après la connexion

Cela peut réaliser la communication entre Rn et Webview Après

mettre le code source :

<!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>

Copier après la connexion

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

});

Copier après la connexion

Recommandations associées :

JS clique de manière interactive sur l'image dans WKWebView et prévisualise l'exemple

Explication détaillée des points de connaissance WebView

Détaillé explication sur la façon de charger du code HTML à l'aide de WebView

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!