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>