recherche

Maison >interface Web >js tutoriel >À propos de la communication entre React Native et WebView

À propos de la communication entre React Native et WebView

小云云
小云云original
2018-02-01 13:17:482266parcourir

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

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

html 封装 字符串 Event JS function 对象 webview reactnative react native
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：Exemple détaillé de communication en temps réel de liaison de données de composant parent-enfant React.jsArticle suivant：Exemple détaillé de communication en temps réel de liaison de données de composant parent-enfant React.js

Articles Liés

Voir plus