react-native的webview組件的使用心得記錄

屬性介紹:

1.source: 加載的網(wǎng)址。(必須帶http:// 或者h(yuǎn)ttps://)

2.automaticallyAdjustContentInsets: 自動(dòng)調(diào)節(jié)內(nèi)容內(nèi)偏移,控制是否自動(dòng)調(diào)節(jié)內(nèi)容內(nèi)偏移以便于一個(gè)navigation bar或者tab bar或者toolbar不擋住Scrollview中的內(nèi)容。默認(rèn)是true。

3.javaScriptEnabled bool : 允許執(zhí)行js語(yǔ)言,僅限Android平臺(tái)。iOS平臺(tái)JavaScript是默認(rèn)開(kāi)啟的。

4.domStorageEnabled bool : 僅限Android平臺(tái)。指定是否開(kāi)啟DOM本地存儲(chǔ)。

5.decelerationRate: 指定一個(gè)浮點(diǎn)數(shù),用于設(shè)置在用戶停止觸摸之后,此視圖應(yīng)以多快的速度停止?jié)L動(dòng)。也可以指定預(yù)設(shè)的字符串值,如"normal"和"fast",分別對(duì)應(yīng)UIScrollViewDecelerationRateNormal 和UIScrollViewDecelerationRateFast。 Normal(正常速度): 0.998 Fast(較快速度): 0.9 (iOS WebView的默認(rèn)值)。

6.onNavigationStateChange : 這個(gè)方法無(wú)法阻止頁(yè)面的跳轉(zhuǎn)行為,所以大家只能通過(guò)這個(gè)方法獲取用戶的一些行為。從而做出判斷,當(dāng)webview顯示的頁(yè)面中有 postMessage的同名函數(shù)時(shí)將會(huì)報(bào)錯(cuò)。

onNavigationStateChange = (navState) => {
   this.setState({
     backButtonEnabled: navState.canGoBack,
     forwardButtonEnabled: navState.canGoForward,
     url: navState.url,
     status: navState.title,
     loading: navState.loading,
     scalesPageToFit: true
   });
 };
<WebView
                bounces={false}
                scalesPageToFit={true}
                source={{uri:"http://www.baidu.com"}}
                style={styles.webView}>
</WebView>

7.onShouldStartLoadWithRequest: 允許為webview發(fā)起的請(qǐng)求運(yùn)行一個(gè)自定義的處理函數(shù)。返回true或false表示是否要繼續(xù)執(zhí)行響應(yīng)的請(qǐng)求。

8.scalesPageToFit bool :設(shè)置是否要把網(wǎng)頁(yè)縮放到適應(yīng)視圖的大小。

9.mediaPlaybackRequiresUserAction bool : 設(shè)置頁(yè)面中的HTML5音視頻是否需要在用戶點(diǎn)擊后再開(kāi)始播放。默認(rèn)值為true.

10.onError function :加載失敗時(shí)調(diào)用。

11.onLoad function :加載成功時(shí)調(diào)用。

12.onLoadEnd function :加載結(jié)束時(shí)(無(wú)論成功或失?。┱{(diào)用。

12.onLoadStart function :加載開(kāi)始時(shí)調(diào)用。

13.onMessage function :在webview內(nèi)部的網(wǎng)頁(yè)中調(diào)用window.postMessage方法時(shí)可以觸發(fā)此屬性對(duì)應(yīng)的函數(shù),從而實(shí)現(xiàn)網(wǎng)頁(yè)和RN之間的數(shù)據(jù)交換。 設(shè)置此屬性的同時(shí)會(huì)在webview 中注入一個(gè)postMessage的全局函數(shù)并覆蓋可能已經(jīng)存在的同名實(shí)現(xiàn)。網(wǎng)頁(yè)端的window.postMessage只發(fā)送一個(gè)參數(shù)data,此參數(shù)封裝在RN端的event對(duì)象中,即event.nativeEvent.data。data只能是一個(gè)字符串

14.renderError function :設(shè)置一個(gè)函數(shù),返回一個(gè)視圖用于顯示錯(cuò)誤。

15.renderLoading function : 設(shè)置一個(gè)函數(shù),返回一個(gè)加載指示器。

16.startInLoadingState bool :強(qiáng)制WebView在第一次加載時(shí)先顯示loading視圖。默認(rèn)為true。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容