React Native之網頁組件WebView的使用與通訊

時間 2019-11-11

標籤 react native 網頁組件 webview 使用通訊欄目 React 简体版

原文原文鏈接

在實際開發中，咱們一般會嵌入一些html頁面，官方爲咱們提供了一個很是好用的網頁組件WebView，經過這個組件咱們能夠經過傳入一個url或者是傳入一段htmlhtml

一. WebView的基本屬性方法介紹與使用

主要屬性介紹

source：在 WebView 中載入一段靜態的 html 代碼或是傳入一個 url（還能夠附帶一些 header 選項）
automaticallyAdjustContentInsets：設置是否自動調整內容。格式：bool。默認值爲true
contentInset：設置內容所佔的尺寸大小。格式：{top:number,left:number,bottom:number,right:number}
injectedJavaScript(String)：當網頁加載以前注入一段 js 代碼。其值是字符串形式。
startInLoadingState：是否開啓頁面加載的狀態，其值爲 true 或者 false。
bounces（僅iOS）：回彈特性。默認爲 true。若是設置爲 false，則內容拉到底部或者頭部都不回彈。
scalesPageToFit（僅iOS）：用於設置網頁是否縮放自適應到整個屏幕視圖，以及用戶是否能夠改變縮放頁面。
scrollEnabled（僅iOS）：用於設置是否開啓頁面滾動。
domStorageEnabled（僅Android）：用於控制是否開啓 DOM Storage（存儲）。
javaScriptEnabled（僅Android）：是否開啓 JavaScript，在 iOS 中的 WebView 是默認開啓的。

主要方法介紹

onNavigationStateChange：當導航狀態發生變化的時候調用。
onLoadStart：當網頁開始加載的時候調用。
onError：當網頁加載失敗的時候調用。
onLoad：當網頁加載結束的時候調用。
onLoadEnd：當網頁加載結束調用，無論是成功仍是失敗。
renderLoading：WebView組件正在渲染頁面時觸發的函數，只有 startInLoadingState 爲 true 時該函數才起做用。
renderError：監聽渲染頁面出錯的函數。
onShouldStartLoadWithRequest（僅iOS）：該方法容許攔截 WebView 加載的 URL 地址，進行自定義處理。該方法經過返回 true 或者 falase 來決定是否繼續加載該攔截到請求。
onMessage：在webView內部網頁中，調用window.postMessage能夠觸發此屬性對應的函數，經過event.nativeEvent.data獲取接收到的數據，實現網頁和RN之間的數據傳遞
injectJavaScript（function）：函數接受一個字符串，該字符串將傳遞給WebView，並當即執行爲JavaScript。

經過url加載一個頁面

render() {
        return (
            <View style={styles.container}>
                <WebView
                    ref={webView => this.webView = webView}
                    startInLoadingState={true}
                    onNavigationStateChange={e => this.onNavigationStateChange(e)}
                    source={{ uri: 'https://github.com/xxxxxxx'}}
                />
            </View>
        );
    }

經過html加載一個頁面

render() {
        return (
            <View style={styles.container}>
                <WebView
                    ref={webView => this.webView = webView}
                    startInLoadingState={true}
                    onNavigationStateChange={e => this.onNavigationStateChange(e)}
                    source={{ html: '<h1'>Demo</h1>'}}
                />
            </View>
        );
    }

二. RN WebView和H5之間的通訊

1.RN WebView向H5頁面注入JS

思路：經過jnjectedJavaScript的方式注入JS，在H5頁面加載以後當即執行。（能夠理解爲是在WebView中去主動觸發H5的方法，從而實現通訊）html5

須要注意的是，injectedJavaScript注入的必須是JS，注入的內容能夠是方法的實現也能夠是方法名。其實注入函數名的時候，實際上注入的仍然是函數的實現。當注入js方法名須要傳遞參數的時候，能夠提早將函數名做爲字符串，函數參數做爲變量，經過生成一個字符串而後再講字符串注入。java

render() {
        let text = 'back';
        let call = `call('${text}')`;
        return (
            <View
                style={{flex: 1, backgroundColor: 'white', marginBottom: SAFE_AREA_BOTTOM_HEIGHT}}>
                <WebView style={{flex: 1}}
                         ref='webView'
                         injectedJavaScript={`${text1}`}
                         source={{
                             html: '<body>\n' +
                             '<button onClick="call()" style="margin-top: 100px;" id="call">call</button>\n' +
                             '<script>\n' +
                             '    function call(text) {\n' +
                             '        var btn=  document.getElementById(\'call\')\n' +
                             '        btn.innerHTML="text";\n' +
                             '    }\n' +
                             '\n' +
                             '</script>\n' +
                             '</body>'       
                >
                </WebView>
            </View>
        );
    }

上述代碼當經過WebView向RN頁面注入一個html代碼的時候，經過injectedJavaScript向H5通訊，而後更改button的名字。git

2.WebView和H5相互發送監聽消息

該方式能夠雙向發送消息github

2.1 RN端向H5發送消息

WebView綁定ref，經過html5新增的postMessage發送消息web

onLoadEnd={() => {
     this.refs.webView.postMessage('RN向H5發送的消息');
 }}

在H5中註冊監聽dom

window.onload = function() {
     document.addEventListener('message', function(msg) {
       console.log(msg)
       message = msg.data;
   });
 }

2.2 H5向RN發送消息

在RN端經過onMessage接收消息函數

onMessage={(event) => {console.log(event.nativeEvent.data);}}

網頁端的 window.postMessage 只發送一個參數 data，此參數封裝在 RN 端的 event 對象中，即 event.nativeEvent.data。data 只能是一個字符串。post

H5發送消息，此時只能傳遞string類型flex

window.postMessage('網頁向rn發送的消息');

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。