React Native-12.React Native WebView组件详解

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:按照页面比例和内容宽高比利自动缩放内容。

加载网页效果如下:

React Native-12.React Native WebView组件详解_第1张图片

代码如下:

<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代码效果如下:

React Native-12.React Native WebView组件详解_第2张图片

代码如下:

<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>

你可能感兴趣的:(for,FaceBook)