React-Native WebView组件的使用

WebView组件的属性

1.allowFileAccess:布尔值,设置是否WebView有权访问文件系统。默认值为false(Android);

2.geolocationEnabled:是否允许获取地里位置(android);

3.source:在 WebView 中载入一段静态的 html 代码或是一个 url(还可以附带一些 header 选项)。注意如果是载入html代码,则需要设置originWhitelist,比如可以设为["*"]来允许运行本地代码。

uri:指定组件加载的网址,

method:指定加载的方式,需要服务端配合,

headers:指定加载时的请求头,需要服务端配合,

body:指定加载的请求体,需要服务端配合,

html:用来指定直接加载的html页面格式,

baseUrl:用来将需要加载的文件路径写成相对项目的相对路径

4.originWhitelist:允许导航到的源字符串列表。字符串允许使用通配符,并且只与源(而不是完整的URL)匹配。如果用户点击导航    到一个新页面,但是新页面不在这个白名单中,那么URL将由操作系统处理。默认的白名单来源是“http://”和“https://”。

5.automaticallyAdjustContentInsets:控制插入到导航栏,标签栏或者工具条之后的 web 内容是否自适应。默认为true。

6.mediaPlaybackRequiresUserAction:控制 HTML5 音频和视频播放前是否需要用户点击。默认为true。

7.onError:加载失败调用

8.onLoad加载成功调用

9.onLoadEnd:加载结束调用(不管成功还是失败)

10.onLoadStart:开始加载是调用

11.onNavgationStateChange:导航状态改变时被调用

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

13.renderError:设置一个函数,返回一个视图用于显示错误。

14.renderLoading:设置一个函数,返回一个加载指示器。。为了使用这个属性必须将 startInLoadingState 属性设置为 true。

15.startInLoadingState:布尔值,控制WebView第一次加载时是否显示加载视图(如指示器)。当设置了renderLoading时必须将这个属性设置为true 才能正常显示。

16.scalesPageToFit:布尔值,控制网页内容是否自动适配视图的大小,同时启用用户缩放功能。默认为true。

On iOS, when useWebKit=true, this prop will not work.

17.style:设置样式,跟View类似。

18.decelerationRate:指定一个浮点数,用于设置在用户停止触摸之后,此视图应以多快的速度停止滚动。也可以指定预设的字符串值,如"normal"和"fast",分别对应 UIScrollViewDecelerationRateNormal 和 UIScrollViewDecelerationRateFast。(ios)

normal: 0.998

fast: 0.99 (ios web view 默认)

19.domStorageEnabled:开启Dom本地存储(android)

20.javaScriptEnabled:控制是否启用 JavaScript。仅在安卓下使用,因为 IOS 默认为启用 JavaScript。默认值为true。(android)

21.mixedContentMode:指定混合内容模式。即 WebView 是否应该允许安全链接(https)页面中加载非安全链接(http)的内容

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

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

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

(android only)

22.userAgent:设置 WebView的 user agent 字符串。目前仅支持 Android。

23.allowsInlineMediaPlayback:控制 HTML5 视频是在内部播放(非全屏)还是使用原生的全屏控制器。默认为 false。注意:为了确保内联播放,除了这个属性需要被设置成true, 在 html 代码中视频元素也需要包含 webkit-playsinline属性。(ios)。

24:bounces:控制当 webview 内容到达底部时是否进行回弹。默认为 true。(ios)

25:contentInset:webview 插入到滑动视图时距离边缘的距离。默认为{top: 0, left: 0, bottom: 0, right: 0}。(ios)

26:dataDetectorTypes检测 webview 内容,并将指定类型的数据变成可点击的 URL。默认只对手机号码进行变换。你可以提供单一类型或者数组类型。(ios)

可用的 dataDetectorTypes 如下:

phoneNumber

link

address

calendarEvent

none

all

如果启用新的WKWebView实现,还有额外的三个值可用:

trackingNumber

flightNumber

lookupSuggestion

27:scrollEnabled:控制是否在 WebView中启用滑动。默认为 true。

28:useWebKit:设置true的时候会使用新的WKWebView来代替老的UIWebView。(ios)

WebView组件的方法

1:goForward()

2:goBack()

3:reload()

4:stopLoading()

你可能感兴趣的:(React-Native WebView组件的使用)