ReactNative WebView組件詳解 屬性 函數 實戰分析 JavaScript 最後補充：

源碼傳送門
react-native-webview-plugin插件

在開發Android的時候，一般我們會有一些加載網頁的需求，或者執行一些JavaScript，我們都知道在Android中實現這個功能的控件是WebView,在ReactNative中也有實現此類需求額的組件，它的名字也是WebView。那麼今天的這篇文章就來詳細說說在ReactNative WebView的使用。本文示例效果圖

屬性

• automaticallyAdjustContentInsets
  控制是否調整放置在導航條、標籤欄或工具欄後面的web視圖的內容。默認值爲true

• contentInset {top: number, left: number, bottom: number, right: number}
  設置網頁內嵌邊距

• injectedJavaScript
  設置在網頁加載之前注入一段js代碼

• mediaPlaybackRequiresUserAction
  設置頁面中的HTML5音視頻是否需要在用戶點擊後再開始播放。默認值爲true

• scalesPageToFit
  設置是否要把網頁縮放到適應視圖的大小，以及是否允許用戶改變縮放比例。

• source
  在WebView中指定加載內容html或者url,可以指定header,method等

• startInLoadingState
  強制WebView在第一次加載時先顯示loading視圖。默認爲true

• domStorageEnabled（android）
  布爾值,指定是否開啓DOM本地存儲

• javaScriptEnabled（android）
  布爾值,指定WebView中是否啓用JavaScript。只在Android上使用，因爲在iOS上默認啓用了JavaScript。

• mixedContentMode(android)
  指定混合內容模式。即WebView是否應該允許安全鏈接（https）頁面中加載非安全鏈接（http）的內容,

  • 'never' (默認) - WebView不允許安全鏈接頁面中加載非安全鏈接的內容
  • 'always' - WebView允許安全鏈接頁面中加載非安全鏈接的內容。
  • 'compatibility' - WebView會盡量和瀏覽器當前對待此情況的行爲一致

• userAgent(android)
  爲WebView設置user-agent字符串標識。這一字符串也可以在原生端用WebViewConfig來設置，但js端的設置會覆蓋原生端的設置。

• allowsInlineMediaPlayback（ios）
  指定HTML5視頻是在網頁當前位置播放還是使用原生的全屏播放器播放。 默認值爲false,視頻在網頁播放還需要設置webkit-playsinline

• bounces(ios)
  指定滑動到邊緣後是否有回彈效果。

• decelerationRate（ios）
  指定一個浮點數，用於設置在用戶停止觸摸之後，此視圖應以多快的速度停止滾動。也可以指定預設的字符串值，如"normal"和"fast"，

• scrollEnabled（ios）
  是否啓用滾動

函數

• injectJavaScript
  函數接受一個字符串，該字符串將傳遞給WebView，並立即執行爲JavaScript
• onError
  加載失敗時回調
• onLoad
  完成加載時回調
• onLoadEnd
  加載成功或者失敗都會回調
• onLoadStart
  開始加載的時候回調
• onMessage
  在webView內部網頁中，調用window.postMessage可以觸發此屬性對應的函數，通過event.nativeEvent.data獲取接收到的數據，實現網頁和RN之間的數據傳遞
• renderError
  返回一個視圖用來提示用戶錯誤
• renderLoading
  返回一個加載指示器
• onShouldStartLoadWithRequest(ios)
  請求自定義處理，返回true或false表示是否要繼續執行響應的請求

實戰分析

通過上面的介紹，我們已經對組件的屬性以及函數有了大致的瞭解，當然只有這些是不夠的，接下來就該組件的使用展開分析，效果圖如文章開頭的GIF圖。對於該組件最簡單的使用如下

        <WebView
                source={{uri:'http://www.jianshu.com/u/d5b531888b2b'}}
                style={{width:'100%',height:'100%'}}
            />

指定source屬性，加載網頁，設置寬和高全屏，需要注意的是必須指定寬和高，否則將不顯示組件，默認寬高都是0。
給WebView增加加載時的回調

                    onLoad={(e) => console.log('onLoad')}
                    onLoadEnd={(e) => console.log('onLoadEnd')}
                    onLoadStart={(e) => console.log('onLoadStart')}
                    renderError={() => {
                        console.log('renderError')
                        return <View><Text>renderError回調了，出現錯誤</Text></View>
                    }}
                    renderLoading={() => {
                        return <View><Text>這是自定義Loading...</Text></View>
                    }}

renderError可以自定義加載錯誤的提示信息View.當加載錯誤時會回調該函數，並且顯示該函數返回的View。使用此方法我們可以自定義加載錯誤時的提示信息。
而renderLoading函數可以自定義加載提示.當我們通過WebView加載一個網頁時，往往我們有需求展示出請求的url，網頁的標題，以及是否可前進或者後退。在WebView組件中有一個函數onNavigationStateChange可以實現此功能，他是在加載開始和結束的時候回調的，

   //添加屬性
   onNavigationStateChange={this._onNavigationStateChange}

    _onNavigationStateChange = (navState) => {
        console.log(navState)
        this.setState({
            backButtonEnabled: navState.canGoBack,
            forwardButtonEnabled: navState.canGoForward,
            url: navState.url,
            status: navState.title,
            loading: navState.loading,
        });
    }

當canGoBack返回值爲true時，我們就可以使用this.webview.goBack();（this.webview是WebView的引用）對網頁進行回退操作，同理當canGoForward爲true時我們就可以使用 this.webview.goForward();對我們的網頁進行跳轉操作。當我們的網頁url發生改變時我們可以使用 this.webview.reload();加載新的網頁。

加載HTML

     <WebView>
            style={{width:'100%',height:'100%'}}
            source={require('./helloworld.html');}
     </WebView>

RN和Html通信

當WebView加載html時我們可以實現html和rn之間的通信。rn向html發生數據可以通過postMessage函數實現。如下

this.webview.postMessage('"Hello" 我是RN發送過來的數據');
//在html中註冊事件接收rn發過來的數據並顯示在html中
    document.addEventListener('message', function(e) {
      messagesReceivedFromReactNative += 1;
      document.getElementsByTagName('p')[0].innerHTML =
        '從React Native接收的消息: ' + messagesReceivedFromReactNative;
      document.getElementsByTagName('p')[1].innerHTML = e.data;
    });

在html中我們定義了一個按鈕，並添加事件向rn發送數據

   //window.postMessage向rn發送數據
    document.getElementsByTagName('button')[0].addEventListener('click', function() {
      window.postMessage('這是html發送到RN的消息');
    });

當html中調用了window.postMessage函數後，WebView的onMessage函數將會被回調，用來處理html向rn發送的數據,可以通過e.nativeEvent.data獲取發送過來的數據。

    //接收HTML發出的數據
    _onMessage = (e) => {
        this.setState({
            messagesReceivedFromWebView: this.state.messagesReceivedFromWebView + 1,
            message: e.nativeEvent.data,
        })
        Alert.alert(e.nativeEvent.data)
    }

JavaScript

在android這個需要使用 javaScriptEnabled屬性來支持JavaScript，ios默認是支持的，沒有此屬性。在WebView中提供了函數injectJavaScript（String）,它有一個字符串參數，可以向webview中注入腳本，如下

    //腳本注入
    injectJS = () => {
        const script = 'document.write("Injected JS ")';  // eslint-disable-line quotes
        if (this.webview) {
            this.webview.injectJavaScript(script);
        }
    }

最後需要注意的一點，ScrollView中嵌套WebView時滑倒會有衝突，需要特殊處理（目前還沒研究處理方法。）今天的這篇文章就介紹這麼多，所介紹的實例中，只提供了核心代碼，如果想查看全部代碼可以訪問GitHub,由於認知有限，若有錯誤的地方歡迎指出，共同進步，謝謝。

最後補充：

ReactNative WebView實現Android端圖片和視頻的拍攝和選擇，以及ios，android根據webView內容自動設置高度（WebView嵌套在ScrollView中問題），修復現在Android端WebView偶先的閃退bug，插件地址https://github.com/xiehui999/react-native-webview-plugin.git