이전 글 "css3를 사용하여 이미지에 그라데이션 효과를 추가하는 방법을 가르쳐주세요(자세한 코드 설명)"에서는 CSS3를 사용하여 이미지에 그라데이션 효과를 추가하는 방법을 소개했습니다. 다음 글에서는 React Native와 웹 사이의 기본적인 상호 작용에 대해 소개할 것입니다. 여기에는 특정 참고 가치가 있으며 도움이 필요한 친구들이 참고할 수 있습니다.
//接收来自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 />; }} />;
<!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
는 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();
WKJavaScriptExceptionMessage=ReferenceError: Can't find variable xxx 需要方法需要挂在 window 上 window.xxx = function() {} for vue, mounted: window.xxx =this.xxx프롬프트 오류:
rrreee권장 학습: React 비디오 튜토리얼
🎜위 내용은 React Native와 웹(코드 포함) 간의 기본 상호 작용에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!