深入淺析React Native與web的基本互動（附程式碼）

之前的文章《教你怎麼使用css3為圖片添加漸變效果（程式碼詳解）》中，跟大家介紹怎麼使用css3為圖片加上漸變效果。以下這篇文章跟大家介紹一下React Native與web的基本交互，有一定的參考價值，有需要的朋友可以參考一下。

React Native和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
};
 {
    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 ;
  }}
/>;

H5和React Native互動

  
    
    
    
  
  
    
chuchur
    单击
  

注意事項

假如你的 WebView是從react-native裡引用的話。 H5向RN發送訊息則使用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)

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

原生呼叫H5 方法

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

H5 呼叫原生方法

 //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. 设置调用App方法所需要的传出的参数（这里是json格式）
  function setAppAppearance(){
    handler.callHander({
        'body':"setWebViewAppearance",
        'buttons': [
            {
                "text":"分享",
                "action":""
            }
        ],
        'title':"这是webView的标题"
    });
  }
  // 3. H5调用自己的设置方法,继而调用了原生客户端的方法
  setAppAppearance();

提示報錯：

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

推薦學習：React影片教學

以上是深入淺析React Native與web的基本互動（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！