ReactNative-WebView组件

转自：http://blog.youkuaiyun.com/u014360817/article/details/52463803

一般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;