ReactNative WebView組件詳解

源碼傳送門

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，插件地址github.com/xiehui999/r…