其他回答《教你怎么使用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的最基本互动（附编码）的具体内容，大量欢迎关注AdminJS其他类似文章！