WebView组件简介
目前的WebView支持的属性如下:
- automaticallyAdjustContentInsets: 表示是否自动调整内部内容,其值为
true
或者false
。 - bounces: 回弹效果。如果其值为
false
,则内容拉到底部或者头部不回弹。其值默认为true
。 - contentInset: 内部内容移植,该值为一个JavaScript对象
{top:number,left:number,bottom:number,right:number}
。 - html: HTML代码字符串。如果传入了HTMl代码字符串,则渲染该HTML代码。
- injectedJavaScript:注入的JavaScript代码,其值为字符串。如果加上了该属性,就会在WebView中执行JavaScript代码。
- onNavigationStateChange:监听导航状态变化的函数。
- renderError:监听渲染页面出错的函数。
- startInLoadingState:是否开启页面加载的状态,其值为true或者false。
- renderLoading:WebView组件正在渲染页面时触发的函数,需要同startInLoadingState一起使用,当startLoadingState为true时该函数才起作用。
- scrollEnabled:表示WebView里面页面是否滚动,乳沟其值为true表示可以滚动,false表示禁止滚动。
- onNavigationStateChange:页面导航状态改变时,触发该事件监听。
- scalesPageToFit:按照页面比例和内容宽高比利自动缩放内容。
加载网页效果如下:
代码如下:
<TabBarIOS.Item title = "动态" icon = {require('image!hearts')} onPress = {this.select.bind(this,'star')} selected = {this.state.tab === 'star'}> <View style = {styles.flex}> <WebView contentInset = {{left:-10,top:-28}} scrollEnabled = {false} html = '<div><img src="http://ww3.sinaimg.cn/bmiddle/92220d38gw1f15lo8jn7mj20bp0an3ze.jpg"/></div> style = {{width: width,height : height}} > </WebView> </View> </TabBarIOS.Item>
看到
TabBarIOS.Item
是不是特别的熟悉,没错,这就是从上一章节的代码基础上改的,大家细节回去看一下上一章节
加载自写HTML代码效果如下:
代码如下:
<TabBarIOS.Item title = "动态" icon = {require('image!hearts')} onPress = {this.select.bind(this,'star')} selected = {this.state.tab === 'star'}> <View style = {styles.flex}> <WebView injectedJavaSript = "alert('webView 测试')" bounces = {true} url = "http://weibo.com/imwangxuesen" style = {{width: width,height : height}} > </WebView> </View> </TabBarIOS.Item>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。