前言

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

元件WebView

屬性和方法

主要屬性

• source：在 WebView 中載入一段靜態的 html 程式碼或是一個 url（還可以附帶一些 header 選項）
• automaticallyAdjustContentInsets：設定是否自動調整內容。格式：bool
• contentInset：設定內容所佔的尺寸大小。格式：{top:number,left:number,bottom:number,right:number}
• injectJavaScript：當網頁載入之前注入一段 js 程式碼。其值是字串形式。
• startInLoadingState：是否開啟頁面載入的狀態，其值為 true 或者 false。
  -bounces（僅iOS）：回彈特性。預設為 true。如果設定為 false，則內容拉到底部或者頭部都不回彈。
• scalesPageToFit（僅iOS）：用於設定網頁是否縮放自適應到整個螢幕檢視，以及使用者是否可以改變縮放頁面。
• scrollEnabled（僅iOS）：用於設定是否開啟頁面滾動。
• domStorageEnabled（僅Android）：用於控制是否開啟 DOM Storage（儲存）。
• javaScriptEnabled（僅Android）：是否開啟 JavaScript，在 iOS 中的 WebView 是預設開啟的。

主要方法

• onNavigationStateChange：當導航狀態發生變化的時候呼叫。
• onLoadStart：當網頁開始載入的時候呼叫。
• onError：當網頁載入失敗的時候呼叫。
• onLoad：當網頁載入結束的時候呼叫。
• onLoadEnd：當網頁載入結束呼叫，不管是成功還是失敗。
• renderLoading：WebView元件正在渲染頁面時觸發的函式，只有 startInLoadingState 為 true 時該函式才起作用。
• renderError：監聽渲染頁面出錯的函式。
• onShouldStartLoadWithRequest（僅iOS）：該方法允許攔截 WebView 載入的 URL 地址，進行自定義處理。該方法通過返回 true 或者 falase 來決定是否繼續載入該攔截到請求。

程式碼例項

import React, {Component} from 'react';
import 
{
    StyleSheet,
    View,
    Dimensions,
    WebView
} from 'react-native';
//獲取裝置的寬度和高度
var 
{
    height: deviceHeight,
    width: deviceWidth
} = Dimensions.get('window');
type Props = {};
export default class App extends Component<Props> 
{
    render() 
    {
        return 
            (
            <View style={styles.container}>
            <WebView
                     source={{uri: 'http://www.baidu.com',method: 'POST'}}
                     style={{width: deviceWidth, height: deviceHeight}}
                     onLoadEnd={this.onLoadEnd}>
            </WebView>
            </View>
            );
    }
}

const styles = StyleSheet.create({
container: {flex: 1,},
});

效果

其他