溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容介紹了“React Native與web的基本交互方式”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
//接收來自H5的消息
onMessage = (e) => {
Log("WebView onMessage 收到H5參數(shù)：", e.nativeEvent.data);
let params = e.nativeEvent.data;
params = JSON.parse(params);
Log("WebView onMessage 收到H5參數(shù) json后：", params);
};
onLoadEnd = (e) => {
Log("WebView onLoadEnd e：", e.nativeEvent);
let data = {
source: "from rn",
};
this.web && this.web.postMessage(JSON.stringify(data)); //發(fā)送消息到H5
};
<WebView
ref={(webview) => {
this.web = webview;
}}
style={{
width: "100%",
height: "100%",
justifyContent: "center",
alignItems: "center",
}}
source={require("../data/testwebview.html")}
onLoadEnd={this.onLoadEnd} //加載成功或者失敗都會回調(diào)
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() {
//發(fā)送消息到rn
let params = {
msg: "h6 to rn",
source: "H5",
};
window.postMessage(JSON.stringify(params)); //發(fā)送消息到rn
}
window.document.addEventListener("message", function (e) {
//注冊事件 接收數(shù)據(jù)
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發(fā)消息則使用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)
有關(guān)更多信息，請閱讀地址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. 設(shè)置調(diào)用App方法所需要的傳出的參數(shù)（這里是json格式）
function setAppAppearance(){
handler.callHander({
'body':"setWebViewAppearance",
'buttons': [
{
"text":"分享",
"action":""
}
],
'title':"這是webView的標(biāo)題"
});
}
// 3. H5調(diào)用自己的設(shè)置方法,繼而調(diào)用了原生客戶端的方法
setAppAppearance();提示報錯：
WKJavaScriptExceptionMessage=ReferenceError: Can't find variable xxx
需要方法需要掛在 window 上 window.xxx = function() {}
for vue, mounted: window.xxx =this.xxx“React Native與web的基本交互方式”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼