深入浅析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
};
<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 />;
}}
/>;H5和React Native交互
<!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提案。
原生调用 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 <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中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
推荐：优秀JS开源人脸检测识别项目
Apr 03, 2024 am 11:55 AM
人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计
如何使用PHP和JS创建股票蜡烛图
Dec 17, 2023 am 08:08 AM
如何使用PHP和JS创建股票蜡烛图股票蜡烛图是股票市场中常见的一种技术分析图形，通过绘制股票的开盘价、收盘价、最高价和最低价等数据，帮助投资者更直观地了解股票的价格波动情况。本文将教你如何使用PHP和JS创建股票蜡烛图，并附上具体的代码示例。一、准备工作在开始之前，我们需要准备以下环境：1.一台运行PHP的服务器2.一个支持HTML5和Canvas的浏览器3
股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤
Dec 17, 2023 pm 06:55 PM
股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤，需要具体代码示例随着互联网和科技的快速发展，股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环，其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息，帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的
PHP、Vue和React：如何选择最适合的前端框架？
Mar 15, 2024 pm 05:48 PM
PHP、Vue和React：如何选择最适合的前端框架？随着互联网技术的不断发展，前端框架在Web开发中起着至关重要的作用。PHP、Vue和React作为三种具有代表性的前端框架，每一种都具有其独特的特点和优势。在选择使用哪种前端框架时，开发人员需要根据项目需求、团队技能和个人偏好做出明智的决策。本文将通过比较PHP、Vue和React这三种前端框架的特点和使
Java框架与前端React框架的整合
Jun 01, 2024 pm 03:16 PM
Java框架与React框架的整合：步骤：设置后端Java框架。创建项目结构。配置构建工具。创建React应用。编写RESTAPI端点。配置通信机制。实战案例（SpringBoot+React）：Java代码：定义RESTfulAPI控制器。React代码：获取并显示API返回的数据。
PHP与JS开发技巧：掌握绘制股票蜡烛图的方法
Dec 18, 2023 pm 03:39 PM
随着互联网金融的迅速发展，股票投资已经成为了越来越多人的选择。而在股票交易中，蜡烛图是一种常用的技术分析方法，它能够显示股票价格的变化趋势，帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧，带领读者了解如何绘制股票蜡烛图，并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前，我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人
js和vue的关系
Mar 11, 2024 pm 05:21 PM
js和vue的关系：1、JS作为Web开发基石；2、Vue.js作为前端框架的崛起；3、JS与Vue的互补关系；4、JS与Vue的实践应用。
