recherche

Maison >interface Web >js tutoriel >Explication détaillée des exemples de communication entre React Native et WebView

Explication détaillée des exemples de communication entre React Native et WebView

巴扎黑
巴扎黑original
2017-09-26 09:36:133263parcourir

Cet article présente principalement l'exemple de code pour la communication entre React Native et WebView. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil.

WebView est un composant de ReactNative. Il peut créer une WebView native, qui peut être utilisée pour accéder à une page Web.

Parfois, nous besoin que RN communique avec WebView, ou transfère des données, ou envoie des notifications de message À ce stade, les connaissances suivantes doivent être utilisées

1 : WebView à RN. Envoyez les données à partir de la fin :

Tout d'abord, nous construisons une vue Web :


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

Vous pouvez le voir il existe une méthode onMessage,

fonction onMessage

Lorsque la méthode window.postMessage est appelée dans la page Web à l'intérieur de la vue Web, la fonction correspondant à cet attribut peut être déclenchée, réalisant ainsi échange de données entre la page 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});
}

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

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

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

}

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>

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

});

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée des fonctions appliquées et appelées dans JSArticle suivant：Explication détaillée des fonctions appliquées et appelées dans JS

Articles Liés

Voir plus