Explication détaillée des exemples de communication entre React Native et WebView-js tutoriel-php.cn

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

巴扎黑

Libérer： 2017-09-26 09:36:13

original

3176 Les gens l'ont consulté

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

Copier après la connexion

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

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

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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