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

加载网页效果如下：

代码如下：

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