久久久久久久视色,久久电影免费精品,中文亚洲欧美乱码在线观看,在线免费播放AV片

<center id="vfaef"><input id="vfaef"><table id="vfaef"></table></input></center>

    <p id="vfaef"><kbd id="vfaef"></kbd></p>

    
    
    <pre id="vfaef"><u id="vfaef"></u></pre>

      <thead id="vfaef"><input id="vfaef"></input></thead>

    1. 站長資訊網(wǎng)
      最全最豐富的資訊網(wǎng)站

      深入淺析React Native與web的基本交互(附代碼)

      之前的文章《教你怎么使用css3給圖片添加漸變效果(代碼詳解)》中,給大家介紹怎么使用css3給圖片添加漸變效果。下面本篇文章給大家介紹一下React Native與web的基本交互,有一定的參考價(jià)值,有需要的朋友可以參考一下。

      React Native和H5交互

      //接收來自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">       //相互通信只能傳遞字符串類型       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) {         //注冊事件 接收數(shù)據(jù)         const message = e.data; //字符串類型         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里引用的話。H5RN發(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)

      贊(0)
      分享到: 更多 (0)
      網(wǎng)站地圖   滬ICP備18035694號(hào)-2    滬公網(wǎng)安備31011702889846號(hào)