【React Native開發】 - WebView組件的使用

很多時候我們需要在App中嵌入一個活動頁面我們需要不定時的開始一個活動，又不定時的結束一個活動。如果使用Native

開發，需要更新APP，這對應用戶來說，是很不好的體驗，因此，我們可以藉助WebView解決這個問題。

1.WebView屬性

 - automaticallyAdjustContentInserts:表示是否自動調整內部內容，其值是true或false。

 - contentInsert:內部內容偏移量，該值爲javascript對象{top:number,left:number,bottom:number,right:number}。

 - html:HTML代碼字符串。如果傳入了HTML代碼字符串，則渲染該HTML代碼。

 - injectedJavaScript:注入javascript代碼，其值爲字符串。如果加上該屬性，就會在webView中執行javascript代碼。

 - renderError:監聽渲染頁面錯誤的函數。

 - startInLoadingState:是否開啓頁面加載的狀態，其值爲false或true。

 - renderLoading:WebView正在渲染頁面時觸發的函數，需要同startInLoadingState一起使用，當startInLoadingState爲true

 時起作用。

 - bounces:只適用於IOS平臺，回彈效果。false則內容拉到底部或者頭部不回彈，默認爲true。

 - scrollEnabled:只適用於IOS，表示WebView裏面的頁面是否可以滾動，其值爲false，不可滾動，true爲可以滾動。

 - scalePageToFit:只適用於IOS,按照頁面比例和內容寬高自動縮放內容。

 - javaScriptEnabled:該適用於Android，是否開啓javaScript，IOS中WebView是默認開啓的。

 - domStorageEnabled:boolean類型，只適用於Android平臺，用於控制是否開啓dom存儲。

 - onNavigationStateChange:監聽導航狀態變化的函數。

 - onError:function網頁加載失敗時調用。

 - onLoad:function網頁加載結束時調用。

 - onLoadStart:function網頁開始加載時調用。

  - onLoadEnd:function網頁結束加載時調用，不管成功還是失敗。

2.實例

import React,{Component} from 'react'
import {
    StyleSheet,
    View,
    Text,
    WebView,
} from 'react-native'
export default class Root extends Component{
    constructor(props){
        super(props)
    }
    render(){
        return (
            <View style={styles.container}>
                <WebView
                  source={{uri: 'https://www.baidu.com'}}
                    domStorageEnabled={true}
                    javaScriptEnabled={true}
                    startInLoadingState={true}
                    automaticallyAdjustContentInsets={true}>
                </WebView>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container:{
        flex:1,
    },

})

3.案例效果