Maison > Article > interface Web > Une analyse approfondie de l'interaction de base entre React Native et le web (avec code)
Dans l'article précédent "Vous apprendre à utiliser CSS3 pour ajouter des effets de dégradé aux images (explication détaillée du code)", j'ai présenté comment utiliser CSS3 pour ajouter des effets de dégradé aux images. L'article suivant vous présentera l'interaction de base entre React Native et le Web. Il a une certaine valeur de référence et les amis dans le besoin peuvent s'y référer.
//接收来自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>
Si votre WebView
est référencé depuis react-native
. H5
envoie un message à RN
en utilisant window.postMessage(message)
afin de réduire la surface de React Native.
, il sera supprimé du noyau de React Native
, il est recommandé d'utiliser 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); } }];S'il est introduit avec
react-native-webview
, le la méthode de communication utilise window.ReactNativeWebView.postMessage(message)<blockquote>
<p></p>Pour plus d'informations, veuillez lire les propositions sur https://github.com/react-native-community/discussions-and-proposals/ problèmes/6. </blockquote>
<h2></h2>Appelez la méthode H5 de manière native<h2><pre class="brush:php;toolbar:false"> //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({
&#39;body&#39;:"setWebViewAppearance",
&#39;buttons&#39;: [
{
"text":"分享",
"action":""
}
],
&#39;title&#39;:"这是webView的标题"
});
}
// 3. H5调用自己的设置方法,继而调用了原生客户端的方法
setAppAppearance();</pre></h2>Méthode native d'appel H5<p><pre class="brush:php;toolbar:false">WKJavaScriptExceptionMessage=ReferenceError: Can&#39;t find variable xxx
需要方法需要挂在 window 上 window.xxx = function() {}
for vue, mounted: window.xxx =this.xxx</pre></p>Erreur d'invite : <p>rrreee<a href="https://www.php.cn/course/list/21.html" target="_blank">Apprentissage recommandé : </a>Tutoriel vidéo React</p>🎜
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!