之前的文章《教你怎麼使用css3為圖片添加漸變效果(程式碼詳解)》中,跟大家介紹怎麼使用css3為圖片加上漸變效果。以下這篇文章跟大家介紹一下React Native與web的基本交互,有一定的參考價值,有需要的朋友可以參考一下。
//接收来自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 />; }} />;
<!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>
假如你的 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提案。
[wkWebView evaluateJavaScript:@"js方法名()" completionHandler:^(id _Nullable response, NSError * _Nullable error) { if (!error) { // 成功 NSLog(@"%@",response); } else { // 失败 NSLog(@"%@",error.localizedDescription); } }];
//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({ '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中文網其他相關文章!