【React Native開發】React Native控件之WebView組件詳解以及實例使用

magtermuz736 8年前發布 | 64K 次閱讀移動開發 React Native

來自： http://www.lcode.org/【react-native開發】react-native控件之webview組件詳解以及實例使用22/

(一)前言

今天我們一起來看一下WebView組件講解以及使用實例

剛創建的React Native技術交流群( 282693535 ),歡迎各位大牛,React Native技術愛好者加入交流!同時博客左側歡迎微信掃描關注訂閱號,移動技術干貨,精彩文章技術推送!

該WebView組件進行創建渲染一個原生的WebView，進行加載一個網頁。

(二)屬性方法

繼承可以使用View組件的所有屬性和Style(具體查看: http://非死book.github.io/react-native/docs/view.html#content 和 http://非死book.github.io/react-native/docs/view.html#style )
automaticallyAdjustContentInsets bool 設置是否自動調整內容
contentInset {top:number,left:number,bottom:number,right:number} 設置內容所占的尺寸大小
html string WebView加載的HTML文本字符串
injectJavaScript string 當網頁加載之前進行注入一段js代碼
onError function 方法當網頁加載失敗的時候調用
onLoad function 方法當網頁加載結束的時候調用
onLoadEnd fucntion 當網頁加載結束調用，不管是成功還是失敗
onLoadStart function 當網頁開始加載的時候調用
onNavigationStateChange function方法當導航狀態發生變化的時候調用
renderError function 該方法用于渲染一個View視圖用來顯示錯誤信息
renderLoagin function 該方法用于渲染一個View視圖用來顯示一個加載進度指示器
startInLoadingState bool
url string 設置加載的網頁地址
allowsInlineMediaPlayback bool 該適合iOS平臺，設置決定當使用HTML5播放視頻的時候在當前頁面位置還是使用原生的全屏播放器播放，默認值false。【注意】.為了讓視頻在原網頁位置進行播放，不光要設置該屬性為true，還必須要設置HTML頁面中video節點的包含webkit-playsinline屬性
bounces bool 該適合iOS平臺設置是否有界面反彈特性
domStorageEnabled bool 該適合Android平臺該只適合于Android平臺，用于控制是否開啟DOM Storage（存儲）
javaScriptEnabled bool 該適合于Android平臺，是否開啟javascript，在iOS中的WebView是默認開啟的
onShouldStartLoadWithRequest function 該適合iOS平臺，該允許攔截WebView加載的URL地址，進行自定義處理。該方法通過返回true或者falase來決定是否繼續加載該攔截到請求
scalesPageToFit bool 該適合iOS平臺用于設置網頁是否縮放自適應到整個屏幕視圖以及用戶是否可以改變縮放頁面
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}}>
        <Text style={{height:40}}>簡單的網頁顯示</Text>
        <WebView style={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);

運行效果截圖如下:

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 = `
<!DOCTYPE html>\n
<html>
  <head>
    <title>HTML字符串</title>
    <meta http-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}}>
        <WebView style={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);

運行效果截圖如下: