【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, }, })