WebView

参考文档

警告请改用此组件的react-native-community / react-native-webview分支。为了减少React Native的表面积，将从React Native核心中删除。有关更多信息，请阅读Slimmening建议。

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

你可以使用这个组件进行网页的来回导航，并且为网页内容设置多方面的属性。在iOS上，可以使用useWebKit属性选择加入WKWebView支持的实现。

安全提示:

目前, onMessage and postMessage 方法不能够指定源。当WebView加载某些非预期文档时可能导致跨站脚本攻击。请查阅 MDN 文档获取更多安全方面的细节Window.postMessage() .

查看 Props

继承了所有View Props.

属性	类型	必填	描述
allowUniversalAccessFromFileURLs	bool	否	布尔值，用于设置是否应允许在文件方案URL上下文中运行的JavaScript从任何来源访问内容。包括从其他文件方案URL访问内容。默认值为false。（Android）
allowFileAccess	bool	否	布尔值，用于设置WebView是否有权访问文件系统。默认值为false。(Android)
geolocationEnabled	bool	否	设置是否在WebView中启用地理定位。默认值为false。仅在Android中使用。(Android)
source	object	否	在 WebView 中载入一段静态的 html 代码或是一个 url（还可以附带一些 header 选项）。注意如果是载入 html 代码，则需要设置originWhitelist，比如可以设为["*"]来允许运行本地代码
automaticallyAdjustContentInsets	bool	否	控制插入到导航栏，标签栏或者工具条之后的 web 内容是否自适应。默认为true
injectedJavaScript	string	否	设置 js 字符串，在网页加载之前注入的一段 JS 代码。
injectJavaScript	function	否	在网页加载完成之后，还可以主动调用此方法（以 ref 形式调用）继续给 WebView 注入 JS 代码。注入后会立即执行。
mediaPlaybackRequiresUserAction	bool	否	布尔值，控制 HTML5 音频和视频播放前是否需要用户点击。默认为true
nativeConfig	object	否	覆盖渲染 WebView 的原生组件。启用一个 js 和初始 WebView 一样的定制的原生 WebView。
onError	function	否	当 WebView加载失败时调用的函数
onLoad	function	否	当 WebView加载成功后执行的函数
onLoadEnd	function	否	函数，当加载结束调用，不管是成功还是失败
onLoadStart	function	否	当 WebView刚开始加载时调用的函数
onMessage	function	否	在 webview 内部的网页中调用 window.postMessage 方法时可以触发此属性对应的函数，从而实现网页和 RN 之间的数据交换。设置此属性的同时会在 webview 中注入一个 postMessage 的全局函数并覆盖可能已经存在的同名实现。网页端的 window.postMessage 只发送一个参数 data，此参数封装在 RN 端的 event 对象中，即 event.nativeEvent.data。data 只能是一个字符串。
onNavigationStateChange	function	否	当导航状态发生变化的时候调用。
renderError	function	否	设置一个函数，返回一个视图用于显示错误。
renderLoading	function	否	设置一个函数，返回一个加载指示器。。为了使用这个属性必须将 startInLoadingState 属性设置为 true。
scalesPageToFit	bool	否	布尔值，控制网页内容是否自动适配视图的大小，同时启用用户缩放功能。默认为true。
onShouldStartLoadWithRequest	function	否	允许为 webview 发起的请求运行一个自定义的处理函数。返回 true 或 false 表示是否要继续执行响应的请求。(ios)
originWhitelist	array of strings	否	允许导航到的原始字符串列表。这些字符串允许使用通配符，并且仅与源（而不是完整的URL）匹配。如果用户点击导航至新页面，但新页面不在此白名单中，则URL将由操作系统处理。列入白名单的默认来源是“ http：//”和“ https：//”。
startInLoadingState	bool	否	布尔值，控制WebView第一次加载时是否显示加载视图（如指示器）。当设置了renderLoading时必须将这个属性设置为true 才能正常显示。
style	View.style	否	设置 WebView的样式。
decelerationRate	number	否	指定一个浮点数，用于设置在用户停止触摸之后，此视图应以多快的速度停止滚动。也可以指定预设的字符串值，如"normal"和"fast"，分别对应 UIScrollViewDecelerationRateNormal 和 UIScrollViewDecelerationRateFast。 normal: 0.998 fast: 0.99 (ios web view 默认)。(ios)
domStorageEnabled	bool	否	仅限 Android 平台。指定是否开启 DOM 本地存储。。(Android)
javaScriptEnabled	bool	否	布尔值，控制是否启用 JavaScript。仅在安卓下使用，因为 IOS 默认为启用 JavaScript。默认值为true。(Android)
mixedContentMode	string	否	指定混合内容模式。即 WebView 是否应该允许安全链接（https）页面中加载非安全链接（http）的内容, never (默认) - WebView 不允许安全链接页面中加载非安全链接的内容 always - WebView 允许安全链接页面中加载非安全链接的内容。 compatibility - WebView 会尽量和浏览器当前对待此情况的行为一致。(Android)
thirdPartyCookiesEnabled	bool	否	布尔值，是否启用第三方 cookie。仅在安卓 Lollipop 版本或以上使用，因为安卓 Kitkat 以下版本和 IOS 系统默认都启用第三方 cookie。默认为 true。。(Android)
userAgent	string	否	设置 WebView的 user agent 字符串。目前仅支持 Android。(Android)
allowsInlineMediaPlayback	bool	否	布尔值，控制 HTML5 视频是在内部播放(非全屏)还是使用原生的全屏控制器。默认为 false。注意 : 为了确保内联播放，除了这个属性需要被设置成true, 在 html 代码中视频元素也需要包含 webkit-playsinline属性。(ios)
bounces	bool	否	布尔值，控制当 webview 内容到达底部时是否进行回弹。默认为 true。(ios)
contentInset	object: {top: number, left: number, bottom: number, right: number}	否	webview 插入到滑动视图时距离边缘的距离。默认为{top: 0, left: 0, bottom: 0, right: 0}。(ios)
dataDetectorTypes	string, or array	否	检测 webview 内容，并将指定类型的数据变成可点击的 URL。默认只对手机号码进行变换。(ios)
scrollEnabled	bool	否	控制是否在 WebView中启用滑动。默认为 true。(ios)
useWebKit	boolean	否	设置 true 的时候会使用新的 WKWebView 来代替老的 UIWebView。(ios)
url	string	否	已过时. 请使用 source 属性代替。
html	string	否	已过时. 请使用 source 属性代替。

方法

extraNativeComponentConfig()

static extraNativeComponentConfig()

goForward()

goForward()

根据 webview 的历史访问记录往前一个页面。

goBack()

goBack();

根据 webview 的历史访问记录往后一个页面。

reload()

reload();

刷新当前页面。

stopLoading()

stopLoading();

停止载入当前页面。

Example

示例

import React, { Component } from 'react';
import { WebView } from 'react-native';

class MyWeb extends Component {
  render() {
    return (
      <WebView
        source={{uri: 'https://github.com/facebook/react-native'}}
        style={{marginTop: 20}}
      />
    );
  }
}

3.1.18 WebView