【React Native】文件翻譯閱讀紀錄 - Components(組件) - WebView

by - 上午9:00

Facebook Open Source React Native


WebView

WebView 以本機視圖呈現 Web 內容。

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}}
      />
    );
  }
}
您可以使用此組件在Web視圖的歷史記錄中來回導航，並為Web內容配置各種屬性。
安全警告：目前，onMessage 和 postMessage 不允許指定原點。如果在 WebView 實例中加載了意外文檔，這可能會導致跨站點腳本攻擊。有關此安全問題的更多詳細信息，請參閱 Window.postMessage() 的MDN文檔。

Props

Methods

參考

Props

source

在WebView中加載靜態html或uri（帶有可選標頭）。
TYPEREQUIRED
object: {uri: string,method: string,headers: object,body: string}, ,object: {html: string,baseUrl: string}, ,numberNo

automaticallyAdjustContentInsets

控制是否調整位於導航欄，選項卡欄或工具欄後面的Web視圖的內容插入。默認值是true。
TYPEREQUIRED
boolNo

injectJavaScript

接受將傳遞給WebView並立即作為JavaScript執行的字符串的函數。
TYPEREQUIRED
functionNo

injectedJavaScript

設置此項以提供將在加載視圖時注入網頁的JavaScript。
TYPEREQUIRED
stringNo

mediaPlaybackRequiresUserAction

確定HTML5音頻和視頻是否要求用戶在開始播放之前點擊它們的布爾值。默認值是true。
TYPEREQUIRED
boolNo

nativeConfig

覆蓋用於呈現WebView的本機組件。啟用自定義本機WebView，它使用與原始WebView相同的JavaScript。
TYPEREQUIRED
object: {component: any,props: object,viewManager: object}No

onError

WebView加載失敗時調用的函數。
TYPEREQUIRED
functionNo

onLoad

WebView加載完成後調用的函數。
TYPEREQUIRED
functionNo

onLoadEnd

WebView 加載成功或失敗時調用的函數。
TYPEREQUIRED
functionNo

onLoadStart

WebView 開始加載時調用的函數。
TYPEREQUIRED
functionNo

onMessage

webview 調用 window.postMessage 時調用的函數。設置此屬性會將 postMessage 全局注入到您的 webview 中，但仍會調用 postMessage 的預先存在的值。

 window.postMessage 接受一個參數 data，它將在事件對象 event.nativeEvent.data 上可用。數據必須是字符串。
TYPEREQUIRED
functionNo

onNavigationStateChange

WebView 加載開始或結束時調用的函數。
TYPEREQUIRED
functionNo

originWhitelist

允許導航到的原始字符串列表。字符串允許使用通配符並僅與原點（而不是完整的URL）匹配。如果用戶點擊導航到新頁面但新頁面不在此白名單中，則URL將由OS處理。默認的白名單來源是“http：//”和“https：//”。
TYPEREQUIRED
array of stringsNo

renderError

返回視圖以顯示是否存在錯誤的函數。
TYPEREQUIRED
functionNo

renderLoading

返回加載指示符的函數。必須將startInLoadingState prop設置為true才能使用此prop。
TYPEREQUIRED
functionNo

scalesPageToFit

布爾值，控制是否縮放Web內容以適合視圖，並使用戶能夠更改比例。默認值是true。
TYPEREQUIRED
boolNo

initialScale

控制視圖的初始比例百分比的數字。 50是50％，100是100％等。僅在Android中使用。
TYPEREQUIREDPLATFORM
numberNoAndroid

onShouldStartLoadWithRequest

允許自定義處理任何Web視圖請求的功能。從函數返回true以繼續加載請求，返回false以停止加載。
TYPEREQUIREDPLATFORM
functionNoiOS

startInLoadingState

布爾值，強制WebView在第一次加載時顯示加載視圖。必須將此prop設置為true才能使renderLoading prop工作。
TYPEREQUIRED
boolNo

style

要應用於WebView的樣式。
TYPEREQUIRED
View.styleNo

decelerationRate

一個浮點數，用於確定用戶抬起手指後滾動視圖的減速速度。您還可以使用分別與UIScrollViewDecelerationRateNormal和UIScrollViewDecelerationRateFast的基礎iOS設置匹配的字符串快捷方式“normal”和“fast”：
  • 正常：0.998
  • 快速：0.99（iOS網頁視圖的默認設置）
TYPEREQUIREDPLATFORM
ScrollView.propTypes.decelerationRateNoiOS

domStorageEnabled

用於控制是否啟用DOM存儲的布爾值。僅在Android中使用。

TYPEREQUIREDPLATFORM
boolNoAndroid

javaScriptEnabled

用於在WebView中啟用JavaScript的布爾值。僅在Android上使用，因為默認情況下在iOS上啟用了JavaScript。默認值是true。
TYPEREQUIREDPLATFORM
boolNoAndroid

mixedContentMode

指定混合內容模式。即WebView將允許安全的來源加載來自任何其他來源的內容。

 mixedContentMode 的可能值為：
  • 'never' (default) - WebView不允許安全來源從不安全的來源加載內容。
  • 'always' - WebView將允許安全的來源加載來自任何其他來源的內容，即使該來源不安全。
  • 'compatibility' - 
  • WebView將嘗試與混合內容相關的現代Web瀏覽器方法兼容。
  • TYPE所需的平台
TYPEREQUIREDPLATFORM
enum('never', 'always', 'compatibility')NoAndroid

thirdPartyCookiesEnabled

用於在WebView中啟用第三方cookie的布爾值。僅在Android Lollipop及更高版本上使用，因為默認情況下在Android Kitkat及以下和iOS上啟用第三方Cookie。默認值是true。
TYPEREQUIREDPLATFORM
boolNoAndroid

userAgent

設置WebView的用戶代理。
TYPEREQUIREDPLATFORM
stringNoAndroid

allowsInlineMediaPlayback

確定HTML5視頻是否內聯播放或使用本機全屏控制器的布爾值。默認值為false。

 注意：為了使視頻內聯播放，不僅需要將此屬性設置為true，而且HTML文檔中的視頻元素還必須包含webkit-playsinline屬性。
TYPEREQUIREDPLATFORM
boolNoiOS

bounces

布爾值，用於確定Web視圖在到達內容邊緣時是否彈回。默認值是true。
TYPEREQUIREDPLATFORM
boolNoiOS

contentInset

Web視圖內容從滾動視圖的邊緣插入的量。默認為{top：0，left：0，bottom：0，right：0}。
TYPEREQUIREDPLATFORM
object: {top: number, left: number, bottom: number, right: number}NoiOS

dataDetectorTypes

確定在Web視圖的內容中轉換為可單擊URL的數據類型。默認情況下，僅檢測到電話號碼。

 您可以提供一種類型或多種類型的數組。

 dataDetectorTypes的可能值為：
  • 'phoneNumber'
  • 'link'
  • 'address'
  • 'calendarEvent'
  • 'none'
  • 'all'
TYPEREQUIREDPLATFORM
enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all')NoiOS

scrollEnabled

布爾值，確定是否在WebView中啟用滾動。默認值是true。
TYPEREQUIREDPLATFORM
boolNoiOS

geolocationEnabled

設置是否在WebView中啟用了Geolocation。默認值為false。僅在Android中使用。
TYPEREQUIREDPLATFORM
boolNoAndroid

allowUniversalAccessFromFileURLs

Boolean，用於設置是否允許在文件方案URL的上下文中運行的JavaScript訪問來自任何源的內容。包括訪問其他文件方案URL中的內容。默認值為false。
TYPEREQUIREDPLATFORM
boolNoAndroid

url

已過時. 請改用 source 
TYPEREQUIRED
stringNo

html

已過時. 請改用 source
TYPEREQUIRED
stringNo

Methods

extraNativeComponentConfig()

static extraNativeComponentConfig()

goForward()

goForward();
在Web視圖的歷史記錄中前進一頁。

goBack()

goBack();
返回Web視圖歷史記錄中的一頁。

reload()

reload();
重新加載當前頁面。

stopLoading()

stopLoading();
停止加載當前頁面。




Share
Tweet
Pin
Share
Tags : , , , , , , , , , , , , , , ,

You May Also Like

0 意見