WebView組件詳解以及實例使用(22) · React Native學習指南

# 轉載請標明出處： [http://blog.csdn.net/developer_jiangqq/article/details/50676379](http://blog.csdn.net/developer_jiangqq/article/details/50676379) 本文出自:[【江清清的博客】](http://blog.csdn.net/developer_jiangqq) # (一)前言 ?????????【好消息】個人網站已經上線運行,后面博客以及技術干貨等精彩文章會同步更新，請大家關注收藏:[http://www.lcode.org](http://www.lcode.org/)??????? ? ? ? ? 今天我們一起來看一下WebView組件講解以及使用實例 ? ? ? ? ??剛創建的React Native技術交流1群(282693535),React Native交流2群:(496601483)，請不要重復加群！,歡迎各位大牛,React?Native技術愛好者加入交流!同時博客左側歡迎微信掃描關注訂閱號,移動技術干貨,精彩文章技術推送! ??????????該WebView組件進行創建渲染一個原生的WebView，進行加載一個網頁。 # (二)屬性方法 1. 繼承可以使用View組件的所有屬性和Style(具體查看:[http://facebook.github.io/react-native/docs/view.html#content](http://facebook.github.io/react-native/docs/view.html#content)?和[http://facebook.github.io/react-native/docs/view.html#style](http://facebook.github.io/react-native/docs/view.html#style)) 2. automaticallyAdjustContentInsets bool???設置是否自動調整內容 3. contentInset? {top:number,left:number,bottom:number,right:number}??設置內容所占的尺寸大小 4. html??string??WebView加載的HTML文本字符串 5. injectJavaScript? string?當網頁加載之前進行注入一段js代碼 6. onError?function??方法?當網頁加載失敗的時候調用 7. onLoad? function?方法??當網頁加載結束的時候調用 8. onLoadEnd fucntion?當網頁加載結束調用，不管是成功還是失敗 9. onLoadStart? function??當網頁開始加載的時候調用 10. onNavigationStateChange function方法??當導航狀態發生變化的時候調用 11. renderError? function??該方法用于渲染一個View視圖用來顯示錯誤信息 12. renderLoagin function??該方法用于渲染一個View視圖用來顯示一個加載進度指示器 13. startInLoadingState? bool ? 14. url? string??設置加載的網頁地址 15. allowsInlineMediaPlayback? bool???該適合iOS平臺，設置決定當使用HTML5播放視頻的時候在當前頁面位置還是使用原生的全屏播放器播放，默認值false。【注意】.為了讓視頻在原網頁位置進行播放，不光要設置該屬性為true，還必須要設置HTML頁面中video節點的包含webkit-playsinline屬性 16. bounces?bool??該適合iOS平臺?設置是否有界面反彈特性 17. domStorageEnabled bool??該適合Android平臺?該只適合于Android平臺，用于控制是否開啟DOM Storage（存儲） 18. javaScriptEnabled? bool??該適合于Android平臺，是否開啟javascript，在iOS中的WebView是默認開啟的 19. onShouldStartLoadWithRequest? function??該適合iOS平臺，該允許攔截WebView加載的URL地址，進行自定義處理。該方法通過返回true或者falase來決定是否繼續加載該攔截到請求 20. scalesPageToFit? bool??該適合iOS平臺??用于設置網頁是否縮放自適應到整個屏幕視圖以及用戶是否可以改變縮放頁面 21. scrollEnabled? bool????該適合iOS平臺?用于設置是否開啟頁面滾動 # (三)實戰實例 ???????上面我已經對于WebView組件的基本介紹以及相關屬性方法做了講解，下面我們用幾個實例來演示一下WebView組件的使用。 ?????? 3.1.先演示一個WebView組件最基本的使用方法，直接加載一個網頁，具體代碼如下: ~~~ 'use strict'; import React, { AppRegistry, Component, StyleSheet, Text, View, WebView, } from'react-native'; var DEFAULT_URL = 'http://www.lcode.org'; var WebViewDemo =React.createClass({ render: function() { return ( <View style={{flex:1}}> <Textstyle={{height:40}}>簡單的網頁顯示</Text> <WebViewstyle={styles.webview_style} url={DEFAULT_URL} startInLoadingState={true} domStorageEnabled={true} javaScriptEnabled={true} > </WebView> </View> ); }, }); var styles =StyleSheet.create({ webview_style:{ backgroundColor:'#00ff00', } }); AppRegistry.registerComponent('WebViewDemo',() => WebViewDemo); ~~~ 運行效果截圖如下: ![](https://box.kancloud.cn/2016-02-29_56d3fc09e2982.jpg) ?? 3.2.WebView加載本地的HTML靜態字符串，具體代碼如下: ~~~ 'use strict'; import React, { AppRegistry, Component, StyleSheet, Text, View, WebView, } from'react-native'; var DEFAULT_URL = 'http://www.lcode.org'; const HTML = ` <!DOCTYPEhtml>\n <html> <head> <title>HTML字符串</title> <metahttp-equiv="content-type" content="text/html;charset=utf-8"> <meta name="viewport"content="width=320, user-scalable=no"> <style type="text/css"> body { margin: 0; padding: 0; font: 62.5% arial, sans-serif; background: #ccc; } h1 { padding: 45px; margin: 0; text-align: center; color: #33f; } </style> </head> <body> <h1>加載靜態的HTML文本信息</h1> </body> </html> `; var WebViewDemo =React.createClass({ render: function() { return ( <View style={{flex:1}}> <WebViewstyle={styles.webview_style} html={HTML} startInLoadingState={true} domStorageEnabled={true} javaScriptEnabled={true} > </WebView> </View> ); }, }); var styles =StyleSheet.create({ webview_style:{ backgroundColor:'#00ff00', } }); AppRegistry.registerComponent('WebViewDemo',() => WebViewDemo); ~~~ ?運行效果截圖如下: ![](https://box.kancloud.cn/2016-02-29_56d3fc0a30418.jpg) # (四)最后總結 ??????????今天我們主要學習一下WebView組件的基本介紹和實例演示使用，具體還有更加詳細的使用方法會在后面進階中繼續更新的。大家有問題可以加一下群React Native技術交流群(282693535)或者底下進行回復一下。 ? ? ? ?尊重原創，轉載請注明：From Sky丶清（[http://blog.csdn.net/developer_jiangqq](http://blog.csdn.net/developer_jiangqq)）侵權必究！ ? ? ? ?關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),項目管理以及博客文章!(歡迎關注，第一時間推送精彩文章) ![](https://box.kancloud.cn/2016-02-29_56d3fbf75e010.jpg) ? ? ?關注我的微博，可以獲得更多精彩內容 ? ? ??[![](https://box.kancloud.cn/2016-02-29_56d3fc00eb890.png)](http://weibo.com/u/1855428195?s=6uyXnP)