ReactNative WebView组件通信
2017-10-10 13:04
936 查看
转载http://blog.csdn.net/xiehuimx/article/details/77151724
源码传送门
在开发Android的时候,一般我们会有一些加载网页的需求,或者执行一些JavaScript,我们都知道在android中实现这个功能的控件是WebView,在ReactNative中也有实现此类需求额的组件,它的名字也是WebView。那么今天的这篇文章就来详细说说在ReactNative
WebView的使用。本文示例效果图
automaticallyAdjustContentInsets
控制是否调整放置在导航条、标签栏或工具栏后面的web视图的内容。默认值为true
contentInset {top: number, left: number, bottom: number, right: number}
设置网页内嵌边距
injectedJavaScript
设置在网页加载之前注入一段js代码
mediaPlaybackRequiresUserAction
设置页面中的HTML5音视频是否需要在用户点击后再开始播放。默认值为true
scalesPageToFit
设置是否要把网页缩放到适应视图的大小,以及是否允许用户改变缩放比例。
source
在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图。对于该组件最简单的使用如下
2
3
4
1
2
3
4
指定source属性,加载网页,设置宽和高全屏,需要注意的是必须指定宽和高,否则将不显示组件,默认宽高都是0。
给WebView增加加载时的回调
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可以实现此功能,他是在加载开始和结束的时候回调的,
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();加载新的网页。
2
3
4
1
2
3
4
当WebView加载html时我们可以实现html和rn之间的通信。rn向html发生数据可以通过postMessage函数实现。如下
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
在html中我们定义了一个按钮,并添加事件向rn发送数据
2
3
4
1
2
3
4
当html中调用了window.postMessage函数后,WebView的onMessage函数将会被回调,用来处理html向rn发送的数据,可以通过e.nativeEvent.data获取发送过来的数据。
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
在android这个需要使用 javaScriptEnabled属性来支持javascript,iOS默认是支持的,没有此属性。在WebView中提供了函数injectJavaScript(String),它有一个字符串参数,可以向webview中注入脚本,如下
2
3
4
5
6
7
1
2
3
4
5
6
7
最后需要注意的一点,ScrollView中嵌套WebView时滑倒会有冲突,需要特殊处理(目前还没研究处理方法。)今天的这篇文章就介绍这么多,所介绍的实例中,只提供了核心代码,如果想查看全部代码可以访问GitHub,由于认知有限,若有错误的地方欢迎指出,共同进步,谢谢。
源码传送门
在开发Android的时候,一般我们会有一些加载网页的需求,或者执行一些JavaScript,我们都知道在android中实现这个功能的控件是WebView,在ReactNative中也有实现此类需求额的组件,它的名字也是WebView。那么今天的这篇文章就来详细说说在ReactNative
WebView的使用。本文示例效果图
属性
automaticallyAdjustContentInsets 控制是否调整放置在导航条、标签栏或工具栏后面的web视图的内容。默认值为true
contentInset {top: number, left: number, bottom: number, right: number}
设置网页内嵌边距
injectedJavaScript
设置在网页加载之前注入一段js代码
mediaPlaybackRequiresUserAction
设置页面中的HTML5音视频是否需要在用户点击后再开始播放。默认值为true
scalesPageToFit
设置是否要把网页缩放到适应视图的大小,以及是否允许用户改变缩放比例。
source
在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:'http://www.jianshu.com/u/d5b531888b2b'}} 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();加载新的网页。
加载HTML
<WebView> style={{width:'100%',height:'100%'}} source={require('./helloworld.html');} </WebView>1
2
3
4
1
2
3
4
RN和Html通信
当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() { window.postMessage('这是html发送到RN的消息'); });1
2
3
4
1
2
3
4
当html中调用了window.postMessage函数后,WebView的onMessage函数将会被回调,用来处理html向rn发送的数据,可以通过e.nativeEvent.data获取发送过来的数据。
//接收HTML发出的数据 _onMessage = (e) => { this.setState({ messagesReceivedFromWebView: this.state.messagesReceivedFromWebView + 1, message: e.nativeEvent.data, }) Alert.alert(e.nat b374 iveEvent.data) }1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
JavaScript
在android这个需要使用 javaScriptEnabled属性来支持javascript,iOS默认是支持的,没有此属性。在WebView中提供了函数injectJavaScript(String),它有一个字符串参数,可以向webview中注入脚本,如下//脚本注入 injectJS = () => { const script = 'document.write("Injected JS ")'; // eslint-disable-line quotes if (this.webview) { this.webview.injectJavaScript(script); } }1
2
3
4
5
6
7
1
2
3
4
5
6
7
最后需要注意的一点,ScrollView中嵌套WebView时滑倒会有冲突,需要特殊处理(目前还没研究处理方法。)今天的这篇文章就介绍这么多,所介绍的实例中,只提供了核心代码,如果想查看全部代码可以访问GitHub,由于认知有限,若有错误的地方欢迎指出,共同进步,谢谢。
相关文章推荐
- ReactNative WebView组件通信
- ReactNative-WebView组件
- 【React Native开发】React Native控件之WebView组件详解以及实例使用(22)
- React Native-12.React Native WebView组件详解
- 解决 react native 的 webview 组件不支持android客户端上传图片文件问题
- ReactNative WebView组件详解
- 关于 React Native 与 WebView 的通信
- react native利用webvView嵌入h5页面以及RN与webView的通信
- react native与webview通信跳转页面报错:Cannot read property 'setNativeProps' of undefiend
- 支持android&ios高度自适应及JS相互调用的组件react-native-webview2
- (八)React Native---WebView组件
- React Native知识8-WebView组件
- React Native系列——WebView组件使用介绍
- ReactNative-WebView组件
- 【React Native开发】 - WebView组件的使用
- ReactNative WebView组件详解
- 关于 React Native 与 WebView 的通信
- 支持android&ios高度自适应及JS相互调用的组件react-native-webview2
- React-native 之WebView的使用
- ReactNative Webview加载本地html异常问题