在WebView中指定加载内容html或者url,可以指定header,method等
- startInLoadingState
强制WebView在第一次加载时先显示loading视图。默认为true
- domStorageEnabled（android）
布尔值,指定是否开启DOM本地存储
- javaScriptEnabled（android）
布尔值,指定WebView中是否启用JavaScript。只在Android上使用，因为在iOS上默认启用了JavaScript。
- mixedContentMode(android)
指定混合内容模式。即WebView是否应该允许安全链接（https）页面中加载非安全链接（http）的内容,
-
’never’ (默认) - WebView不允许安全链接页面中加载非安全链接的内容
-
‘always’ - WebView允许安全链接页面中加载非安全链接的内容。
-
‘compatibility’ - WebView会尽量和浏览器当前对待此情况的行为一致
-
userAgent(android)
为WebView设置user-agent字符串标识。这一字符串也可以在原生端用WebViewConfig来设置，但js端的设置会覆盖原生端的设置。
- allowsInlineMediaPlayback（ios）
指定HTML5视频是在网页当前位置播放还是使用原生的全屏播放器播放。 默认值为false,视频在网页播放还需要设置webkit-playsinline
- bounces(ios)
指定滑动到边缘后是否有回弹效果。
- decelerationRate（ios）
指定一个浮点数，用于设置在用户停止触摸之后，此视图应以多快的速度停止滚动。也可以指定预设的字符串值，如”normal”和”fast”，
- scrollEnabled（ios）
是否启用滚动
================================================================
- injectJavaScript
函数接受一个字符串，该字符串将传递给WebView，并立即执行为JavaScript
- onError
加载失败时回调
- onLoad
完成加载时回调
- onLoadEnd
加载成功或者失败都会回调
- onLoadStart
开始加载的时候回调
- onMessage
在webView内部网页中，调用window.postMessage可以触发此属性对应的函数，通过event.nativeEvent.data获取接收到的数据，实现网页和RN之间的数据传递
- renderError
返回一个视图用来提示用户错误
- renderLoading
返回一个加载指示器
- onShouldStartLoadWithRequest(ios)
请求自定义处理，返回true或false表示是否要继续执行响应的请求
==================================================================
通过上面的介绍，我们已经对组件的属性以及函数有了大致的了解，当然只有这些是不够的，接下来就该组件的使用展开分析，效果图如文章开头的GIF图。对于该组件最简单的使用如下
<WebView
source=
{{uri:’www.jianshu.com/u/d5b531888…
style=
{{width:‘100%’,height:‘100%’}}
/>
-
1
-
2
-
3
-
4
-
1
-
2
-
3
-
4
指定source属性，加载网页，设置宽和高全屏，需要注意的是必须指定宽和高，否则将不显示组件，默认宽高都是0。
给WebView增加加载时的回调
onLoad={
(e) =>
console.log(
'onLoad')}
onLoadEnd={
(e) =>
console.log(
'onLoadEnd')}
onLoadStart={
(e) =>
console.log(
'onLoadStart')}
renderError={
() => {
console.log(
'renderError')
return
<View><Text>renderError回调了，出现错误</Text></View>
}}
renderLoading={
() => {
return
<View><Text>这是自定义Loading...</Text></View>
}}
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
renderError可以自定义加载错误的提示信息View.当加载错误时会回调该函数，并且显示该函数返回的View。使用此方法我们可以自定义加载错误时的提示信息。
而renderLoading函数可以自定义加载提示.当我们通过WebView加载一个网页时，往往我们有需求展示出请求的url，网页的标题，以及是否可前进或者后退。在WebView组件中有一个函数onNavigationStateChange可以实现此功能，他是在加载开始和结束的时候回调的，
//添加属性
onNavigationStateChange={
this._onNavigationStateChange}
_onNavigationStateChange =
(navState) => {
console
.log(navState)
this
.setState({
backButtonEnabled: navState
.canGoBack,
forwardButtonEnabled: navState
.canGoForward,
url: navState
.url,
status: navState
.title,
loading: navState
.loading,
})
;
}
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
当canGoBack返回值为true时，我们就可以使用this.webview.goBack();（this.webview是WebView的引用）对网页进行回退操作，同理当canGoForward为true时我们就可以使用 this.webview.goForward();对我们的网页进行跳转操作。当我们的网页url发生改变时我们可以使用 this.webview.reload();加载新的网页。
<WebView>
style=
{{width:'100%',height:'100%'}}
source={
require(
'./helloworld.html');}
</WebView>
-
1
-
2
-
3
-
4
-
1
-
2
-
3
-
4
当WebView加载html时我们可以实现html和rn之间的通信。rn向html发生数据可以通过postMessage函数实现。如下
this.webview.postMessage(
'"Hello" 我是RN发送过来的数据');
//在html中注册事件接收rn发过来的数据并显示在html中
document.addEventListener(
'message',
function(e) {
messagesReceivedFromReactNative +=
1;
document.getElementsByTagName(
'p')[
0].innerHTML =
'从React Native接收的消息: ' + messagesReceivedFromReactNative;
document.getElementsByTagName(
'p')[
1].innerHTML = e.data;
});
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
在html中我们定义了一个按钮，并添加事件向rn发送数据
//window.postMessage向rn发送数据
document.getElementsByTagName(
'button')[
0].addEventListener(
'click',
function() {
