组件：WebView

创建一个原生的WebView，可以用于访问一个网页。

一、基本用法

1.基础用法

<View style={{flex: 1, backgroundColor: 'white'}}>
    <WebView
    ref={WEBVIEW_REF}
    source={{uri: webUrl}}
    onMessage={this.handMessage}
    //是否支持javascript
    javaScriptEnabled={true}
    //设置是否要把网页缩放到适应视图的大小，以及是否允许用户改变缩放比例。
    scalesPageToFit={true}
    //加载状态显示
    startInLoadingState={true}/>
</View>

2.常用属性

source {uri: string, method: string, headers: object, body: string}, {html: string, baseUrl: string}, number 
在WebView中载入一段静态的html代码或是一个url（还可以附带一些header选项）。

scalesPageToFit bool 
设置是否要把网页缩放到适应视图的大小，以及是否允许用户改变缩放比例。

startInLoadingState bool 
强制WebView在第一次加载时先显示loading视图。默认为true。

onMessage function
在webview内部的网页中调用window.postMessage方法时可以触发此属性对应的函数，从而实现网页和RN之间的数据交换。 设置此属性的同时会在webview中注入一个postMessage
的全局函数并覆盖可能已经存在的同名实现。网页端的window.postMessage只发送一个参数data，此参数封装在RN端的event对象中，即event.nativeEvent.data。
data 只能是一个字符串。

onError function 
加载失败时调用。

onLoad function 
加载成功时调用。

onLoadEnd function 
加载结束时（无论成功或失败）调用。

onLoadStart function 
加载开始时调用。

其他属性，见中文网：http://reactnative.cn/docs/0.46/webview.html#scalespagetofit

3.遇到的坑

1.在<View/>中添加<WebView/>一定要设置布局的大小，否则就会出现空白页面。

二、WebView与React Native通信

1.webView向ReactNative发送消息

RN端：

<WebView/>中代码：
 <WebView
        ref={w => this.webview = w}
        onMessage={this.handleMessage}
 />
方法中代码：
 handleMessage = (event) => {
        const urlMessage = event.nativeEvent.data
       //TODO 取到值，之后的操作

    }

网页端：
function()方法里：window.postMessage只发送一个参数data，data 只能是一个字符串。
可能在编写代码的时候window.后面找不到postMessage这个方法，但是可以大胆的写上去，之后测试便知。

1.ReactNative向webView发送消息

RN端：

在该组件（页面）渲染完毕，WebView的 ref 属性执行之后，在组件（页面）中的任何地方使用this.webview.postMessage向WebView中的页面发送消息。

this.webview.postMessage(message)

网页端：
监听从React Native发过来的消息：

window.document.addEventListener('message', function (e) {
    const message = e.data
})

本篇记录本人写代码时遇到的坑和一些不明白的地方，如果是更复杂的React Native与WebView 通信，请参考http://www.jianshu.com/p/b37ee000379e