WebView学习

先来介绍一下它的属性和方法

属性

• source

{uri:string,method:string,headers:object,body:string},{html:string,baseUrl:string},number

在WebView中载入一段静态html代码或者url（还可以附带一些header选项）。

• contentInset

{top:number,left:number,bottom:number,right:number}

设置网页内嵌边距

• injectedJavaScript

设置在网页加载之前注入一段JS代码。

• mediaPlaybackRequiresUserAction

设置页面中的HTML5音视频是否需要在用户点击后再开始播放。默认值为true.

• scalesPageToFit

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

• startInLoadingState

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

• domStorageEnabled(android)

布尔值，指定是否开启DOM本地存储

• javaScriptEnabled(android)

布尔值，指定WebView中是否启用JavaScript，只在Android上使用，因为在IOS上默认启用了JavaScript。

mixedContentMode(android)

指定混合内容模式。即WebView是否应该允许安全链接（https）页面中国加载非安全链接（http）的内容

      ‘never’(默认) - WebView不允许安全链接页面中加载非安全链接的内容

      ‘always’ - WebView允许安全链接页面中加载非安全链接的内容。

      ‘compatibility’ - WebView会尽量和浏览器当前对待此情况的行为一致。

• userAgent(android)

为WebView设置user-anent字符串标识。这一字符串也可以在原生端用WebViewConfig来设置，但JS端的设置会覆盖掉原生段的设置。

• allowsInlineMediaPlayback(ios)

指定HTML5视频是在网页当前位置播放还是使用原生的全屏播放器播放。默认值为false,视频在网页播放还需要设置webkit-playsinline

bounces(ios)

指定滑动到边缘后是否有回弹效果。

 

 onMessage

在WebView内部的网页中调用window.postMessage方法时可以触发此属性对应的函数，从而实现网页和RN之间的数据交换。

设置此属性的同时会在WebView中注入一个postMessage的全局函数并覆盖可能已经存在的同名实现。

网页端的window.postMessage只发送一个参数data，此参数封装在RN端的event对象中。

4. onLoadEnd

加载结束时（无论加载成功与否）调用