一、WebView 组件介绍
使用 WebView 组件可通过 url 来加载显示一个网页，也可以传入一段 html 代码来显示。下面对其主要属性和方法进行介绍。
1. 主要属性
source：在 WebView 中载入一段静态的 html 代码或是一个 url（还可以附带一些 header 选项）；
automaticallyAdjustContentInsets：设置是否自动调整内容。格式：bool；
contentInset：设置内容所占的尺寸大小。格式：{top:number,left:number,bottom:number,right:number}；
injectJavaScript：当网页加载之前注入一段 js 代码。其值是字符串形式。
startInLoadingState：是否开启页面加载的状态，其值为 true 或者 false。
bounces（仅iOS）：回弹特性。默认为 true。如果设置为 false，则内容拉到底部或者头部都不回弹。
scalesPageToFit（仅iOS）：用于设置网页是否缩放自适应到整个屏幕视图，以及用户是否可以改变缩放页面。
scrollEnabled（仅iOS）：用于设置是否开启页面滚动。
domStorageEnabled（仅Android）：用于控制是否开启 DOM Storage（存储）。
javaScriptEnabled（仅Android）：是否开启 JavaScript，在 iOS 中的 WebView 是默认开启的。
2. 主要方法
onNavigationStateChange：当导航状态发生变化的时候调用。
onLoadStart：当网页开始加载的时候调用。
onError：当网页加载失败的时候调用。
onLoad：当网页加载结束的时候调用。
onLoadEnd：当网页加载结束调用，不管是成功还是失败。
renderLoading：WebView组件正在渲染页面时触发的函数，只有 startInLoadingState 为 true 时该函数才起作用。
renderError：监听渲染页面出错回调函数。
onShouldStartLoadWithRequest（仅iOS）：该方法允许拦截 WebView 加载的 URL 地址，进行自定义处理。该方法通过返回 true 或者 false 来决定是否继续加载该拦截到请求。
onMessage：在webView内部网页中，调用window.postMessage可以触发此属性对应的函数，通过event.nativeEvent.data获取接收到的数据，实现网页和RN之间的数据传递。
injectJavaScript：函数接受一个字符串，该字符串将传递给WebView，并立即执行为JavaScript。
二、WebView 使用样例
2.1 通过 url 地址加载网页
import React, {Component} from 'react';import { AppRegistry, StyleSheet, Dimensions, Text, View, WebView} from 'react-native'; //获取设备的宽度和高度var { height: deviceHeight, width: deviceWidth} = Dimensions.get('window'); //默认应用的容器组件class App extends Component { //渲染 render() { return ( <View style={styles.container}> <WebView bounces={false} scalesPageToFit={true} source={{uri:"https://shq5785.blog.csdn.net/",method: 'GET'}} style={{width:deviceWidth, height:deviceHeight}}> </WebView> </View> ); }} //样式定义const styles = StyleSheet.create({ container: { flex: 1, paddingTop:20 }}); AppRegistry.registerComponent('HelloWorld', () => App);
复制代码
2.2 加载 html 代码
import React, {Component} from 'react';import { AppRegistry, StyleSheet, Dimensions, Text, View, WebView} from 'react-native'; //获取设备的宽度和高度var { height: deviceHeight, width: deviceWidth} = Dimensions.get('window'); //默认应用的容器组件class App extends Component { //渲染 render() { return ( <View style={styles.container}> <WebView bounces={false} scalesPageToFit={true} source={{html:"<h1 style='color:#ff0000'>欢迎访问 https://shq5785.blog.csdn.net/</h1>"}} style={{width:deviceWidth, height:deviceHeight}}> </WebView> </View> ); }} //样式定义const styles = StyleSheet.create({ container: { flex: 1, paddingTop:20 }}); AppRegistry.registerComponent('HelloWorld', () => App);
复制代码
2.3 RN -> HTML5 通信
当WebView加载html时，可实现html和rn之间的通信。rn向html发送数据可以通过postMessage函数实现。如下：
RN
<WebView ref={(view) => (this.webView = view)} useWebKit={false} useWebKit={false} onLoad={() => { let data = { name: userInfo.usrName }; this.webView.postMessage(JSON.stringify(data)); }} onError={(event) => { console.log(`==webViewError:${JSON.stringify(event.nativeEvent)}`); }} onMessage={(event) => { this._onH5Message(event); }} automaticallyAdjustContentInsets={false} contentInset={{ top: 0, left: 0, bottom: -1, right: 0 }} onScroll={(event) => this._onScroll(event)} style={styles.webview} source={this.html ? { html: this.html } : { uri: this.url }} bounces={false} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} />
复制代码
html
// 在html中注册事件接收rn发过来的数据并显示在html中document.addEventListener('message', function listener(RnData) { messagesReceivedFromReactNative += 1; document.getElementsByTagName('p')[0].innerHTML = '从React Native接收的消息: ' + messagesReceivedFromReactNative; document.getElementsByTagName('p')[1].innerHTML = RnData.data; // 获取接收后的数据后，及时清除监听器 document.removeEventListener('message', listener)});
复制代码
在html中定义一个按钮，并添加事件向rn发送数据：
//window.postMessage向rn发送数据document.getElementsByTagName('button')[0].addEventListener('click', function() { window.postMessage('这是html发送到RN的消息');});
复制代码
当html中调用了window.postMessage函数后，WebView的onMessage函数将会被回调，用来处理html向rn发送的数据,可以通过e.nativeEvent.data获取发送过来的数据。
// 接收HTML发出的数据_onH5Message = (e) => { this.setState({ messagesReceivedFromWebView: this.state.messagesReceivedFromWebView + 1, message: e.nativeEvent.data, }) Alert.alert(e.nativeEvent.data)}
复制代码
2.4 HTML5(Vue) -> RN 通信
HTML5
const message = { flag: 'previewIamge' filePath: filePath}window.ReactNativeWebView.postMessage(Json.stringify(message))
复制代码
RN 还是通过WebView提供的onMessage 属性完成回调。
<WebView ref={(view) => (this.webView = view)} useWebKit={false} useWebKit={false} onLoad={() => { let data = { name: userInfo.usrName }; this.webView.postMessage(JSON.stringify(data)); }} onError={(event) => { console.log(`==webViewError:${JSON.stringify(event.nativeEvent)}`); }} onMessage={(event) => { this._onH5Message(event); }} automaticallyAdjustContentInsets={false} contentInset={{ top: 0, left: 0, bottom: -1, right: 0 }} onScroll={(event) => this._onScroll(event)} style={styles.webview} source={this.html ? { html: this.html } : { uri: this.url }} bounces={false} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} />
复制代码
回调函数_onH5Message()实现逻辑如下：
// 接收HTML发出的数据_onH5Message = (e) => { this.setState({ messagesReceivedFromWebView: this.state.messagesReceivedFromWebView + 1, message: e.nativeEvent.data, }) Alert.alert(e.nativeEvent.data)}
复制代码
2.5 JavaScript 脚本注入
注：这种方式适用于 react-native-webview （RN本身没有试过）。
在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); }}
复制代码
实现思路：通过injectJavaScript 注入JS ，在H5页面加载之后立即执行。相当于webview端主动调用H5的方法。
注意事项：injectJavaScript注入的必须是js。注入内容可以是方法实现，也可以是方法名字。
注意：
RN 端
首先Webview绑定 ref='webView'
在H5调用一个名为 receiveMessage 的函数，并传入一个字符串, 参数 true 不可少
<WebView ref={(view) => (this.webView = view)} useWebKit={false} useWebKit={false} onLoadEnd={() => { this.endLoad(); }} .. />
//加载结束调用，不管是成功还是失败。 endLoad(){ // 在H5调用一个名为 `receiveMessage` 的函数，并传入一个字符串, 参数true不可少 this.refs.webView.injectJavaScript(`receiveMessage("RN向H5发送消息");true;`)}
复制代码
H5 端（Vue 实现）
mounted中往 window 上添加一个方法（注意：不是监听，只是挂载）；名为 receiveMessage （必须和RN端保持一致）。
mounted(){ //在window上挂载一个receiveMessage方法，RN会调用 window.receiveMessage = (msg) => { alert( msg) }},
复制代码
三、拓展阅读
评论