Eine eingehende Analyse der grundlegenden Interaktion zwischen React Native und dem Web (mit Code)-js-Tutorial-php.cn

Eine eingehende Analyse der grundlegenden Interaktion zwischen React Native und dem Web (mit Code)

奋力向前

Freigeben： 2021-08-17 11:06:17

nach vorne

3784 Leute haben es durchsucht

Im vorherigen Artikel „Lernen Sie, wie Sie mit CSS3 Farbverlaufseffekte zu Bildern hinzufügen (detaillierte Code-Erklärung)“ habe ich vorgestellt, wie Sie mit CSS3 Farbverlaufseffekte zu Bildern hinzufügen. Der folgende Artikel führt Sie in die grundlegende Interaktion zwischen React Native und dem Web ein. Er hat einen gewissen Referenzwert und Freunde in Not können sich darauf beziehen.

Interaktion zwischen React Native und H5

//接收来自H5的消息
onMessage = (e) => {
  Log("WebView onMessage 收到H5参数：", e.nativeEvent.data);
  let params = e.nativeEvent.data;
  params = JSON.parse(params);
  Log("WebView onMessage 收到H5参数 json后：", params);
};

onLoadEnd = (e) => {
  Log("WebView onLoadEnd e：", e.nativeEvent);
  let data = {
    source: "from rn",
  };
  this.web && this.web.postMessage(JSON.stringify(data)); //发送消息到H5
};
<WebView
  ref={(webview) => {
    this.web = webview;
  }}
  style={{
    width: "100%",
    height: "100%",
    justifyContent: "center",
    alignItems: "center",
  }}
  source={require("../data/testwebview.html")}
  onLoadEnd={this.onLoadEnd} //加载成功或者失败都会回调
  onMessage={(e) => this.onMessage(e)}
  javaScriptEnabled={true} //指定WebView中是否启用JavaScript
  startInLoadingState={true} //强制WebView在第一次加载时先显示loading视图
  renderError={(e) => {
    return <View />;
  }}
/>;

Nach dem Login kopieren

Interaktion zwischen H5 und React Native

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>text webview</title>
    <script type="application/javascript">
      //相互通信只能传递字符串类型
      function test() {
        //发送消息到rn
        let params = {
          msg: "h5 to rn",
          source: "H5",
        };
        window.postMessage(JSON.stringify(params)); //发送消息到rn
      }

      window.document.addEventListener("message", function (e) {
        //注册事件 接收数据
        const message = e.data; //字符串类型
        console.log("WebView message:", message);
        window.postMessage(message);
      });
    </script>
  </head>
  <body>
    <h1>chuchur</h1>
    <button onclick="test()">单击</button>
  </body>
</html>

Nach dem Login kopieren

Hinweise

Wenn Ihr WebView von react-native referenziert wird. H5 sendet eine Nachricht an RN mit window.postMessage(message), um die Oberfläche von React Native zu reduzieren , es wird aus dem Kern von React Native gelöscht, es wird empfohlen, WebView是从react-native里引用的话。H5向RN发消息则使用window.postMessage(message)为了减少React Native的表面积，将从React Native核心中删除，推荐使用

import { WebView } from "react-native"; //会被移除
//to
import { WebView } from "react-native-webview";

Nach dem Login kopieren

假如是用react-native-webview引入则通讯方式使用window.ReactNativeWebView.postMessage(message)

[wkWebView evaluateJavaScript:@"js方法名()" completionHandler:^(id _Nullable response, NSError * _Nullable error) {
    if (!error) { // 成功
       NSLog(@"%@",response);
    } else { // 失败
        NSLog(@"%@",error.localizedDescription);
    }
}];

Nach dem Login kopieren

zu verwenden. Wenn es mit react-native-webview eingeführt wird, wird das Kommunikationsmethode verwendet

window.ReactNativeWebView.postMessage(message)< /code>
Weitere Informationen finden Sie in den Vorschlägen unter https://github.com/react-native-community/discussions-and-proposals/ Ausgaben/6. 
H5-Methode nativ aufrufen //App端：
  // 1. WKWebView注入ScriptMessageHandler
 [wkWebView.configuration.userContentController addScriptMessageHandler:(id <WKScriptMessageHandler>)scriptMessageHandler name:@"xxx"];
  // 2. 提供setWebViewAppearance方法，这样就能反射出H5即将传来的字符串@"setWebViewAppearance"
  - (void)setWebViewAppearance {

  }

//H5端：
  // 1. 获取handler
  var handler = {
    callHander: function (json) {
    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {//ios
        window.webkit.messageHandlers.xxx.postMessage(JSON.stringify(json))
    }
    if (/(Android)/i.test(navigator.userAgent)) { //Android
        window.xxx.postMessage(JSON.stringify(json));
    }
  }
  // 2. 设置调用App方法所需要的传出的参数（这里是json格式）
  function setAppAppearance(){
    handler.callHander({
        &#39;body&#39;:"setWebViewAppearance",
        &#39;buttons&#39;: [
            {
                "text":"分享",
                "action":""
            }
        ],
        &#39;title&#39;:"这是webView的标题"
    });
  }
  // 3. H5调用自己的设置方法,继而调用了原生客户端的方法
  setAppAppearance();
Nach dem Login kopieren
H5-native Methode aufrufen
WKJavaScriptExceptionMessage=ReferenceError: Can&#39;t find variable xxx
需要方法需要挂在 window 上 window.xxx = function() {}
for vue, mounted: window.xxx =this.xxx
Nach dem Login kopieren
Prompt-Fehler: rrreeeEmpfohlenes Lernen: Video-Tutorial reagieren
🎜Das obige ist der detaillierte Inhalt vonEine eingehende Analyse der grundlegenden Interaktion zwischen React Native und dem Web (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!