React Native控件之WebView
2023-09-27 14:29:02 时间
项目中遇到WebView
/**
* Created by tulin1 on 2017/2/14.
*/
import React, {Component} from 'react';
import {
WebView,
View,
StyleSheet,
Dimensions
} from 'react-native';
import NavBar from '../Navigator/PublicNavBar'
const {width, height} = Dimensions.get('window');
export default class WebViewCPIC extends Component {
constructor(props){
super(props);
this.state = {
navTitle :"",
scalesPageToFit:true
}
}
render() {
return (
<View style={{flex: 1,backgroundColor:'white'}}>
<NavBar title={this.state.navTitle} backPage={()=>this.backPage()}/>
<WebView style={styles.webview_style}
ref="webViewRef"
source={{uri: this.props.url}}
javaScriptEnabled={true}
domStorageEnabled={true}
startInLoadingState={true}
scalesPageToFit={true}
onNavigationStateChange = {this._onNavigationStateChange.bind(this)}
/>
</View>
);
}
//获取页面title,URL,loading, canGoBack, canGoForward
_onNavigationStateChange(navState){
let title = Math.abs(navState.title.indexOf('http'))?navState.title:'';
this.setState({
navTitle:title,
scalesPageToFit:true
});
}
backPage() {
this.props.navigator.pop();
}
}
const styles = StyleSheet.create({
webview_style:{
backgroundColor:'white',
},
});
(一)前言
http://blog.csdn.net/developer_jiangqq/article/details/50676379
【好消息】个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏:http://www.lcode.org
今天我们一起来看一下WebView组件讲解以及使用实例
刚创建的React Native技术交流3群(496508742),React Native技术交流4群(458982758),请不要重复加群!,欢迎各位大牛,ReactNative技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!
该WebView组件进行创建渲染一个原生的WebView,进行加载一个网页。
(二)属性方法
- 继承可以使用View组件的所有属性和Style(具体查看:http://facebook.github.io/react-native/docs/view.html#content 和http://facebook.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组件最基本的使用方法,直接加载一个网页,具体代码如下:
运行效果截图如下:
3.2.WebView加载本地的HTML静态字符串,具体代码如下:
运行效果截图如下: