React Native와 웹(코드 포함) 간의 기본 상호 작용에 대한 심층 분석
- 奋力向前앞으로
- 2021-08-17 11:04:533729검색
이전 글 "css3를 사용하여 이미지에 그라데이션 효과를 추가하는 방법을 가르쳐주세요(자세한 코드 설명)"에서는 CSS3를 사용하여 이미지에 그라데이션 효과를 추가하는 방법을 소개했습니다. 다음 글에서는 React Native와 웹 사이의 기본적인 상호 작용에 대해 소개할 것입니다. 여기에는 특정 참고 가치가 있으며 도움이 필요한 친구들이 참고할 수 있습니다.
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>Notes
WebView가 react-native에서 참조되는 경우. H5는 React Native의 노출 영역을 줄이기 위해 <code>window.postMessage(message)를 사용하여 RN에 메시지를 보냅니다. 는 React Native 핵심에서 삭제될 예정이므로 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)
[wkWebView evaluateJavaScript:@"js方法名()" completionHandler:^(id _Nullable response, NSError * _Nullable error) {
if (!error) { // 成功
NSLog(@"%@",response);
} else { // 失败
NSLog(@"%@",error.localizedDescription);
}
}];를 사용하는 것이 좋습니다. react-native-webview로 도입된다면, 통신 방법은 window.ReactNativeWebView.postMessage(message)를 사용합니다자세한 내용은 https://github.com/react-native-community/discussions-and-proposals/에서 제안을 읽어보세요. 문제/6.기본적으로 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();
H5 기본 메서드 호출WKJavaScriptExceptionMessage=ReferenceError: Can't find variable xxx
需要方法需要挂在 window 上 window.xxx = function() {}
for vue, mounted: window.xxx =this.xxx프롬프트 오류: rrreee권장 학습: React 비디오 튜토리얼
🎜위 내용은 React Native와 웹(코드 포함) 간의 기본 상호 작용에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 chuchur.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제