【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.案例效果