美文网首页web前端开发
React-Native WebView组件的使用

React-Native WebView组件的使用

作者: senior高 | 来源:发表于2019-01-05 17:56 被阅读0次

    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组件的使用

        本文链接:https://www.haomeiwen.com/subject/cwldrqtx.html