【React Native开发】React Native控件之WebView组件详解以及实例使用
magtermuz736
9年前
来自： http://www.lcode.org/【react-native开发】react-native控件之webview组件详解以及实例使用22/
(一)前言
今天我们一起来看一下WebView组件讲解以及使用实例
刚创建的React Native技术交流群( 282693535 ),欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!
该WebView组件进行创建渲染一个原生的WebView，进行加载一个网页。
(二)属性方法
- 继承可以使用View组件的所有属性和Style(具体查看: http://非死book.github.io/react-native/docs/view.html#content 和 http://非死book.github.io/react-native/docs/view.html#style )
- automaticallyAdjustContentInsets bool 设置是否自动调整内容
- contentInset {top:number,left:number,bottom:number,right:number} 设置内容所占的尺寸大小
- html string WebView加载的HTML文本字符串
- injectJavaScript string 当网页加载之前进行注入一段js代码
- onError function 方法 当网页加载失败的时候调用
- onLoad function 方法 当网页加载结束的时候调用
- onLoadEnd fucntion 当网页加载结束调用，不管是成功还是失败
- onLoadStart function 当网页开始加载的时候调用
- onNavigationStateChange function方法 当导航状态发生变化的时候调用
- renderError function 该方法用于渲染一个View视图用来显示错误信息
- renderLoagin function 该方法用于渲染一个View视图用来显示一个加载进度指示器
- startInLoadingState bool
- url string 设置加载的网页地址
- allowsInlineMediaPlayback bool 该适合iOS平台，设置决定当使用HTML5播放视频的时候在当前页面位置还是使用原生的全屏播放器播放，默认值false。【注意】.为了让视频在原网页位置进行播放，不光要设置该属性为true，还必须要设置HTML页面中video节点的包含webkit-playsinline属性
- bounces bool 该适合iOS平台 设置是否有界面反弹特性
- domStorageEnabled bool 该适合Android平台 该只适合于Android平台，用于控制是否开启DOM Storage（存储）
- javaScriptEnabled bool 该适合于Android平台，是否开启javascript，在iOS中的WebView是默认开启的
- onShouldStartLoadWithRequest function 该适合iOS平台，该允许拦截WebView加载的URL地址，进行自定义处理。该方法通过返回true或者falase来决定是否继续加载该拦截到请求
- scalesPageToFit bool 该适合iOS平台 用于设置网页是否缩放自适应到整个屏幕视图以及用户是否可以改变缩放页面
- scrollEnabled bool 该适合iOS平台 用于设置是否开启页面滚动
(三)实战实例
上面我已经对于WebView组件的基本介绍以及相关属性方法做了讲解，下面我们用几个实例来演示一下WebView组件的使用。
3.1.先演示一个WebView组件最基本的使用方法，直接加载一个网页，具体代码如下:
'use strict'; import React, { AppRegistry, Component, StyleSheet, Text, View, WebView, } from 'react-native'; var DEFAULT_URL = 'http://www.lcode.org'; var WebViewDemo = React.createClass({ render: function() { return ( <View style={{flex:1}}> <Text style={{height:40}}>简单的网页显示</Text> <WebView style={styles.webview_style} url={DEFAULT_URL} startInLoadingState={true} domStorageEnabled={true} javaScriptEnabled={true} > </WebView> </View> ); }, }); var styles = StyleSheet.create({ webview_style:{ backgroundColor:'#00ff00', } }); AppRegistry.registerComponent('WebViewDemo', () => WebViewDemo); 运行效果截图如下:
3.2.WebView加载本地的HTML静态字符串，具体代码如下:
'use strict'; import React, { AppRegistry, Component, StyleSheet, Text, View, WebView, } from 'react-native'; var DEFAULT_URL = 'http://www.lcode.org'; const HTML = ` <!DOCTYPE html>\n <html> <head> <title>HTML字符串</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=320, user-scalable=no"> <style type="text/css"> body { margin: 0; padding: 0; font: 62.5% arial, sans-serif; background: #ccc; } h1 { padding: 45px; margin: 0; text-align: center; color: #33f; } </style> </head> <body> <h1>加载静态的HTML文本信息</h1> </body> </html> `; var WebViewDemo = React.createClass({ render: function() { return ( <View style={{flex:1}}> <WebView style={styles.webview_style} html={HTML} startInLoadingState={true} domStorageEnabled={true} javaScriptEnabled={true} > </WebView> </View> ); }, }); var styles = StyleSheet.create({ webview_style:{ backgroundColor:'#00ff00', } }); AppRegistry.registerComponent('WebViewDemo', () => WebViewDemo); 运行效果截图如下:
(四)最后总结
今天我们主要学习一下WebView组件的基本介绍和实例演示使用，具体还有更加详细的使用方法会在后面进阶中继续更新的。大家有问题可以加一下群React Native技术交流群( 282693535 )或者底下进行回复一下。
尊重原创，转载请注明：From Sky丶清（ http://www.lcode.org/ ） 侵权必究！
关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注，第一时间推送精彩文章)
关注我的微博，可以获得更多精彩内容
