本篇内容介绍了“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: "h6 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> <h2>chuchur</h2> <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 Native与web的基本交互方式”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
