本篇內(nèi)容介紹了“React Native與web的基本交互方式”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)專注于景東企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),商城建設(shè)。景東網(wǎng)站建設(shè)公司,為景東等地區(qū)提供建站服務(wù)。全流程按需搭建網(wǎng)站，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

React Native和H5交互

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

onLoadEnd = (e) => {
  Log("WebView onLoadEnd e：", e.nativeEvent);
  let data = {
    source: "from rn",
  };
  this.web && this.web.postMessage(JSON.stringify(data)); //發(fā)送消息到H5
};
 {
    this.web = webview;
  }}
  style={{
    width: "100%",
    height: "100%",
    justifyContent: "center",
    alignItems: "center",
  }}
  source={require("../data/testwebview.html")}
  onLoadEnd={this.onLoadEnd} //加載成功或者失敗都會回調(diào)
  onMessage={(e) => this.onMessage(e)}
  javaScriptEnabled={true} //指定WebView中是否啟用JavaScript
  startInLoadingState={true} //強(qiáng)制WebView在第一次加載時先顯示loading視圖
  renderError={(e) => {
    return ;
  }}
/>;

H5和React Native交互

  
    
    
    
      //相互通信只能傳遞字符串類型
      function test() {
        //發(fā)送消息到rn
        let params = {
          msg: "h6 to rn",
          source: "H5",
        };
        window.postMessage(JSON.stringify(params)); //發(fā)送消息到rn
      }

      window.document.addEventListener("message", function (e) {
        //注冊事件 接收數(shù)據(jù)
        const message = e.data; //字符串類型
        console.log("WebView message:", message);
        window.postMessage(message);
      });
    
  
  
    
chuchur
    單擊
  

注意事項

假如你的WebView是從react-native里引用的話。H5向RN發(fā)消息則使用window.postMessage(message)為了減少React Native的表面積，將從React Native核心中刪除，推薦使用

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

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

有關(guān)更多信息，請閱讀地址https://github.com/react-native-community/discussions-and-proposals/issues/6提案。

原生調(diào)用 H5 方法

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

H5 調(diào)用原生方法

 //App端：
  // 1. WKWebView注入ScriptMessageHandler
 [wkWebView.configuration.userContentController addScriptMessageHandler:(id )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. 設(shè)置調(diào)用App方法所需要的傳出的參數(shù)（這里是json格式）
  function setAppAppearance(){
    handler.callHander({
        'body':"setWebViewAppearance",
        'buttons': [
            {
                "text":"分享",
                "action":""
            }
        ],
        'title':"這是webView的標(biāo)題"
    });
  }
  // 3. H5調(diào)用自己的設(shè)置方法,繼而調(diào)用了原生客戶端的方法
  setAppAppearance();

提示報錯：

WKJavaScriptExceptionMessage=ReferenceError: Can't find variable xxx
需要方法需要掛在 window 上 window.xxx = function() {}
for vue, mounted: window.xxx =this.xxx

“React Native與web的基本交互方式”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！