webView使用篇

WebView如何使用篇

---

一、使用场景

当app内需要加入一个网页时，可使用webView加载一个Web页面

---

二、使用方法

import {
     WebView} from 'react-native-webview';
...
<WebView
  source={
     {
     uri: '...'}}
  style={
     }
/>

---

三、参数详解

1.style 继承可以使用View组件的所有属性和Style
2.source {uri: string, method: string, headers: object, body: string}, {html: string, baseUrl: string} 在WebView中载入一段静态的html代码或是一个url（还可以附带一些header选项）。
3.onError function 当网页加载失败的时候调用
4.onLoad function 当网页加载成功的时候调用
5.onLoadEnd fucntion 当网页加载结束调用，无论是成功还是失败
6.onLoadStart function 当网页开始加载的时候调用
7.onNavigationStateChange function 当导航状态发生变化的时候调用
8.renderError function 该方法用于渲染一个View视图用来显示错误信息
9.startInLoadingState bool 控制加载指示器是否可以显示
10.renderLoading function 返回加载指示器
11.injectJavaScript string 当网页加载之前给网页注入一段js代码
12.contentInset {top:number,left:number,bottom:number,right:number} 设置内容所占的尺寸大小
13.automaticallyAdjustContentInsets bool 设置是否自动调整内容
14.scrollEnabled bool 该适合iOS平台 用于设置是否开启页面滚动
15.scalesPageToFit bool 该适合iOS平台 用于设置网页是否缩放自适应到整个屏幕视图以及用户是否可以改变缩放页面
16.onShouldStartLoadWithRequest function 该适合iOS平台，该允许拦截WebView加载的URL地址，进行自定义处理。该方法通过返回true或者falase来决定是否继续加载该拦截到请求
17.bounces bool 该适合iOS平台 设置是否有界面反弹特性
18.domStorageEnabled bool 该适合Android平台 该只适合于Android平台，用于控制是否开启DOM Storage（存储）
19.javaScriptEnabled bool 该适合于Android平台，是否开启javascript，在iOS中的WebView是默认开启的
20.mixedContentMode 该适合于Android平台，指定混合内容模式。即WebView是否应该允许安全链接（https）页面中加载非安全链接（http）的内容。

• ’never’ (默认) - WebView不允许安全链接页面中加载非安全链接的内容
• ‘always’ - WebView允许安全链接页面中加载非安全链接的内容。
• ‘compatibility’ - WebView会尽量和浏览器当前对待此情况的行为一致

21.onMessage 在webView内部网页中，调用window.postMessage可以触发此属性对应的函数，通过event.nativeEvent.data获取接收到的数据，实现网页和RN之间的数据传递