ReactNative-WebView组件
2017-04-16 09:57
573 查看
转自:http://blog.csdn.net/u014360817/article/details/52463803
一般WebView有两种加载方式 一种是通过URL加载网页,第二种是通过本地静态页面加载下图演示加载网页和代码段
![](https://img-blog.csdn.net/20160907220032630)
主要属性和方法:
automaticallyAdjustContentInsets bool 设置是否自动调整内容
contentInset {top:number,left:number,bottom:number,right:number} 设置内容所占的尺寸大小
injectJavaScript 属性 当网页加载之前进行注入一段js代码
onError 方法 当网页加载失败的时候调用
onLoad 方法 当网页加载结束的时候调用
onLoadEnd 方法 当网页加载结束调用,不管是成功还是失败
onLoadStart 方法 当网页开始加载的时候调用
renderError 方法 用于渲染一个View视图用来显示错误信息
source 属性 设置加载的网页地址和静态页面
bounces iOS属性 设置是否有界面反弹特性
domStorageEnabled Android属性
该只适合于Android平台,用于控制是否开启DOM Storage(存储)
javaScriptEnabled Android属性 是否开启JavaScript,在iOS中的WebView是默认开启的
onShouldStartLoadWithRequest IOS方法 该允许拦截WebView加载的URL地址,进行自定义处理。该方法通过返回true或者falase来决定是否继续加载该拦截到请求
scalesPageToFit IOS属性 用于设置网页是否缩放自适应到整个屏幕视图以及用户是否可以改变缩放页面
scrollEnabled IOS属性 用于设置是否开启页面滚动
一般WebView有两种加载方式 一种是通过URL加载网页,第二种是通过本地静态页面加载下图演示加载网页和代码段
主要属性和方法:
automaticallyAdjustContentInsets bool 设置是否自动调整内容
contentInset {top:number,left:number,bottom:number,right:number} 设置内容所占的尺寸大小
injectJavaScript 属性 当网页加载之前进行注入一段js代码
onError 方法 当网页加载失败的时候调用
onLoad 方法 当网页加载结束的时候调用
onLoadEnd 方法 当网页加载结束调用,不管是成功还是失败
onLoadStart 方法 当网页开始加载的时候调用
renderError 方法 用于渲染一个View视图用来显示错误信息
source 属性 设置加载的网页地址和静态页面
bounces iOS属性 设置是否有界面反弹特性
domStorageEnabled Android属性
该只适合于Android平台,用于控制是否开启DOM Storage(存储)
javaScriptEnabled Android属性 是否开启JavaScript,在iOS中的WebView是默认开启的
onShouldStartLoadWithRequest IOS方法 该允许拦截WebView加载的URL地址,进行自定义处理。该方法通过返回true或者falase来决定是否继续加载该拦截到请求
scalesPageToFit IOS属性 用于设置网页是否缩放自适应到整个屏幕视图以及用户是否可以改变缩放页面
scrollEnabled IOS属性 用于设置是否开启页面滚动
/** * Created by gaocai on 16/9/7. */ import React, {Component} from 'react'; import { AppRegistry, WebView, } from 'react-native'; class WebViewG extends Component { render() { return ( <WebView /* 两种加载方式 * 加载网页 source:{{uri: '网址'}} * 加载本地静态页面 source:{{html: '静态页面代码段'}} */ // source={{html: '<h1>这是加载的代码段</h1>'}} source={{uri: 'http://www.baidu.com'}} //加载状态显示 startInLoadingState={true} //存储 IOS是默认支持的 domStorageEnabled={true} //是否支持javascript javaScriptEnabled={true} /> ) } } module.exports = WebViewG;
相关文章推荐
- React Native知识8-WebView组件
- ReactNative WebView组件详解
- 支持android&ios高度自适应及JS相互调用的组件react-native-webview2
- ReactNative WebView组件通信
- React Native-12.React Native WebView组件详解
- 解决 react native 的 webview 组件不支持android客户端上传图片文件问题
- ReactNative-WebView组件
- (八)React Native---WebView组件
- 支持android&ios高度自适应及JS相互调用的组件react-native-webview2
- React Native系列——WebView组件使用介绍
- ReactNative WebView组件详解
- ReactNative WebView组件通信
- 【React Native开发】 - WebView组件的使用
- 【React Native开发】React Native控件之WebView组件详解以及实例使用(22)
- react native 使webview里面的页面自动滚动
- react native Webview ios <Error>: CGAffineTransformInvert: singular matrix.
- React Native之ViewPagerAndroid 组件
- React-Native学习笔记之:WebView控件使用
- React Native WebView 内点击事件获取onNavigationStateChange、onMessage
- ReactNative组件-react-native-scrollable-tab-view