react-native的WebView使用
属性介绍
domStorageEnabled bool 是否储存dom元素
injectJavaScript?: function 在网页加载完成之后,还可以主动调用此方法(以ref形式调用)继续给WebView注入JS代码。注入后会立即执行。
injectedJavaScript string 设置在网页加载之前注入的一段JS代码。
mediaPlaybackRequiresUserAction bool 设置页面中的HTML5音视频是否需要在用户点击后再开始播放。默认值为true.
onError function 加载失败时调用。
onLoad function 加载成功时调用。
onLoadEnd function 加载结束时(无论成功或失败)调用。
onLoadStart function 加载开始时调用。
onMessage function 在webview内部的网页中调用window.postMessage方法时可以触发此属性对应的函数,从而实现网页和RN之间的数据交换。 设置此属性的同时会在webview中注入一个postMessage的全局函数并覆盖可能已经存在的同名实现。
网页端的window.postMessage只发送一个参数data,此参数封装在RN端的event对象中,即event.nativeEvent.data。data 只能是一个字符串。
javaScriptEnabled bool 仅限Android平台。iOS平台JavaScript是默认开启的。
onNavigationStateChange function
renderError function 设置一个函数,返回一个视图用于显示错误。
renderLoading function 设置一个函数,返回一个加载指示器。
source {uri: string, method: string, headers: object, body: string}, {html: string, baseUrl: string}, number 在WebView中载入一段静态的html代码或是一个url(还可以附带一些header选项)。
scalesPageToFit bool 设置是否要把网页缩放到适应视图的大小,以及是否允许用户改变缩放比例。
startInLoadingState bool 强制WebView在第一次加载时先显示loading视图。默认为true。
mixedContentMode?: enum(‘never’, ‘always’, ‘compatibility’)
指定混合内容模式。即WebView是否应该允许安全链接(https)页面中加载非安全链接(http)的内容。
可选的mixedContentMode值如下:
‘never’ (默认) - WebView不允许安全链接页面中加载非安全链接的内容。
‘always’ - WebView允许安全链接页面中加载非安全链接的内容。
‘compatibility’ - WebView会尽量和浏览器当前对待此情况的行为一致。
saveFormDataDisabled?: bool 用于控制页面上的表单是否启用自动保存/自动补全功能。仅Android有效。
userAgent string 为WebView设置user-agent字符串标识。这一字符串也可以在原生端用WebViewConfig来设置,但js端的设置会覆盖原生端的设置。
<WebView
ref={WEBVIEW_REF}
automaticallyAdjustContentInsets={false}
style={styles.webView}
source={{uri: this.state.url}}
javaScriptEnabled={true}
domStorageEnabled={true}
decelerationRate="normal"
onNavigationStateChange={this.onNavigationStateChange}
onShouldStartLoadWithRequest={this.onShouldStartLoadWithRequest}
startInLoadingState={true}
scalesPageToFit={this.state.scalesPageToFit}
/>
onNavigationStateChange = (navState) => {
this.setState({
backButtonEnabled: navState.canGoBack,
forwardButtonEnabled: navState.canGoForward,
url: navState.url,
status: navState.title,
loading: navState.loading,
scalesPageToFit: true
});
};
onShouldStartLoadWithRequest = (event) => {
// Implement any custom loading logic here, don't forget to return!
return true;
};