React Native - 网页组件(WebView)的使用详解
一、WebView组件介绍
使用 WebView 组件我们可以通过 url 来加载显示一个网页,也可以传入一段 html 代码来显示。下面对其主要属性和方法进行介绍。
1,主要属性
- 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 是默认开启的。
2,主要方法
- onNavigationStateChange:当导航状态发生变化的时候调用。
- onLoadStart:当网页开始加载的时候调用。
- onError:当网页加载失败的时候调用。
- onLoad:当网页加载结束的时候调用。
- onLoadEnd:当网页加载结束调用,不管是成功还是失败。
- renderLoading:WebView组件正在渲染页面时触发的函数,只有 startInLoadingState 为 true 时该函数才起作用。
- renderError:监听渲染页面出错的函数。
- onShouldStartLoadWithRequest(仅iOS):该方法允许拦截 WebView 加载的 URL 地址,进行自定义处理。该方法通过返回 true 或者 falase 来决定是否继续加载该拦截到请求。
二、WebView组件的使用样例
1,通过url地址加载网页
(1)效果图程序启动后,我们使用 WebView 加载 hangge.com 并全屏显示。

(2)样例代码
import React, {Component} from 'react'; import { AppRegistry, StyleSheet, Dimensions, Text, View, WebView } from 'react-native'; //获取设备的宽度和高度 var { height: deviceHeight, width: deviceWidth } = Dimensions.get('window'); //默认应用的容器组件 class App extends Component { //渲染 render() { return ( <View style={styles.container}> <WebView bounces={false} scalesPageToFit={true} source={{uri:"http://www.hangge.com",method: 'GET'}} style={{width:deviceWidth, height:deviceHeight}}> </WebView> </View> ); } } //样式定义 const styles = StyleSheet.create({ container: { flex: 1, paddingTop:20 } }); AppRegistry.registerComponent('HelloWorld', () => App);
2,加载html代码
(1)效果图我们传入一段 HTML 代码片段并显示。

(2)样例代码
import React, {Component} from 'react'; import { AppRegistry, StyleSheet, Dimensions, Text, View, WebView } from 'react-native'; //获取设备的宽度和高度 var { height: deviceHeight, width: deviceWidth } = Dimensions.get('window'); //默认应用的容器组件 class App extends Component { //渲染 render() { return ( <View style={styles.container}> <WebView bounces={false} scalesPageToFit={true} source={{html:"<h1 style='color:#ff0000'>欢迎访问 hangge.com</h1>"}} style={{width:deviceWidth, height:deviceHeight}}> </WebView> </View> ); } } //样式定义 const styles = StyleSheet.create({ container: { flex: 1, paddingTop:20 } }); AppRegistry.registerComponent('HelloWorld', () => App);
赞赞赞赞赞赞赞