站長(zhǎng)資訊網(wǎng)
之前的文章《教你怎么使用css3給圖片添加漸變效果（代碼詳解）》中，給大家介紹怎么使用css3給圖片添加漸變效果。下面本篇文章給大家介紹一下React Native與web的基本交互，有一定的參考價(jià)值，有需要的朋友可以參考一下。
React Native和H5交互
//接收來(lái)自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} //加載成功或者失敗都會(huì)回調(diào) onMessage={(e) => this.onMessage(e)} javaScriptEnabled={true} //指定WebView中是否啟用JavaScript startInLoadingState={true} //強(qiáng)制WebView在第一次加載時(shí)先顯示loading視圖 renderError={(e) => { return <View />; }} />;
H5和React Native交互
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>text webview</title> <script type="application/javascript"> //相互通信只能傳遞字符串類(lèi)型 function test() { //發(fā)送消息到rn let params = { msg: "h5 to rn", source: "H5", }; window.postMessage(JSON.stringify(params)); //發(fā)送消息到rn } window.document.addEventListener("message", function (e) { //注冊(cè)事件 接收數(shù)據(jù) const message = e.data; //字符串類(lèi)型 console.log("WebView message:", message); window.postMessage(message); }); </script> </head> <body> <h1>chuchur</h1> <button onclick="test()">單擊</button> </body> </html>
注意事項(xiàng)
假如你的WebView是從react-native里引用的話(huà)。H5向RN發(fā)消息則使用window.postMessage(message)為了減少React Native的表面積，將從React Native核心中刪除，推薦使用
import { WebView } from "react-native"; //會(huì)被移除 //to import { WebView } from "react-native-webview";
假如是用react-native-webview引入則通訊方式使用window.ReactNativeWebView.postMessage(message)
有關(guān)
