之前的文章《教你怎么使用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交互
text webview //相互通信只能传递字符串类型 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); });chuchur
注意事项
假如你的webview是从react-native里引用的话。h5向rn发消息则使用window.postmessage(message)为了减少react native的表面积，将从react native核心中删除，推荐使用
import { WebView } from "react-native"; //会被移除//toimport { 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();
提示报错：
代码小浣熊
代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节
51 查看详情 
WKJavaScriptExceptionMessage=ReferenceError: Can't find variable xxx需要方法需要挂在 window 上 window.xxx = function() {}for vue, mounted: window.xxx =this.xxx
推荐学习：React视频教程
以上就是深入浅析React Native与web的基本交互（附代码）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/562070.html
微信扫一扫 
支付宝扫一扫 
![Go语言接口与切片：如何识别和操作[]interface{}](https://cdn.chuangxiangniao.com/www/2025/12/176369856569294-1.jpg?imageMogr2/crop/480x300/gravity/center)
