在实际开发中,我们通常会嵌入一些html页面,官方为我们提供了一个非常好用的网页组件WebView,通过这个组件我们可以通过传入一个url或者是传入一段html
一. WebView的基本属性方法介绍与使用
主要属性介绍
source:在 WebView 中载入一段静态的 html 代码或是传入一个 url(还可以附带一些 header 选项) automaticallyAdjustContentInsets:设置是否自动调整内容。格式:bool。默认值为true contentInset:设置内容所占的尺寸大小。格式:{top:number,left:number,bottom:number,right:number} injectedJavaScript(String):当网页加载之前注入一段 js 代码。其值是字符串形式。 startInLoadingState:是否开启页面加载的状态,其值为 true 或者 false。 bounces(仅iOS):回弹特性。默认为 true。如果设置为 false,则内容拉到底部或者头部都不回弹。 scalesPageToFit(仅iOS):用于设置网页是否缩放自适应到整个屏幕视图,以及用户是否可以改变缩放页面。 scrollEnabled(仅iOS):用于设置是否开启页面滚动。 domStorageEnabled(仅Android):用于控制是否开启 DOM Storage(存储)。 javaScriptEnabled(仅Android):是否开启 JavaScript,在 iOS 中的 WebView 是默认开启的。主要方法介绍
onNavigationStateChange:当导航状态发生变化的时候调用。 onLoadStart:当网页开始加载的时候调用。 onError:当网页加载失败的时候调用。 onLoad:当网页加载结束的时候调用。 onLoadEnd:当网页加载结束调用,不管是成功还是失败。 renderLoading:WebView组件正在渲染页面时触发的函数,只有 startInLoadingState 为 true 时该函数才起作用。 renderError:监听渲染页面出错的函数。 onShouldStartLoadWithRequest(仅iOS):该方法允许拦截 WebView 加载的 URL 地址,进行自定义处理。该方法通过返回 true 或者 falase 来决定是否继续加载该拦截到请求。 onMessage:在webView内部网页中,调用window.postMessage可以触发此属性对应的函数,通过event.nativeEvent.data获取接收到的数据,实现网页和RN之间的数据传递 injectJavaScript(function):函数接受一个字符串,该字符串将传递给WebView,并立即执行为JavaScript。通过url加载一个页面
render() { return ( <View style={styles.container}> <WebView ref={webView => this.webView = webView} startInLoadingState={true} onNavigationStateChange={e => this.onNavigationStateChange(e)} source={{ uri: 'https://github.com/xxxxxxx'}} /> </View> ); }
通过html加载一个页面
render() { return ( <View style={styles.container}> <WebView ref={webView => this.webView = webView} startInLoadingState={true} onNavigationStateChange={e => this.onNavigationStateChange(e)} source={{ html: '<h1'>Demo</h1>'}} /> </View> ); }
二. RN WebView和H5之间的通信
1.RN WebView向H5页面注入JS
思路: 通过jnjectedJavaScript的方式注入JS,在H5页面加载之后立即执行。(可以理解为是在WebView中去主动触发H5的方法,从而实现通信)
需要注意的是,injectedJavaScript注入的必须是JS,注入的内容可以是方法的实现也可以是方法名。其实注入函数名的时候,实际上注入的仍然是函数的实现。当注入js方法名需要传递参数的时候,可以提前将函数名作为字符串,函数参数作为变量,通过生成一个字符串然后再讲字符串注入。
render() { let text = 'back'; let call = `call('${text}')`; return ( <View style={{flex: 1, backgroundColor: 'white', marginBottom: SAFE_AREA_BOTTOM_HEIGHT}}> <WebView style={{flex: 1}} ref='webView' injectedJavaScript={`${text1}`} source={{ html: '<body>\n' + '<button onClick="call()" style="margin-top: 100px;" >call</button>\n' + '<script>\n' + ' function call(text) {\n' + ' var btn= document.getElementById(\'call\')\n' + ' btn.innerHTML="text";\n' + ' }\n' + '\n' + '</script>\n' + '</body>' > </WebView> </View> ); }
上述代码当通过WebView向RN页面注入一个html代码的时候,通过injectedJavaScript向H5通信,然后更改button的名字。
2.WebView和H5相互发送监听消息
该方式可以双向发送消息
2.1 RN端向H5发送消息WebView绑定ref,通过html5新增的postMessage发送消息
onLoadEnd={() => { this.refs.webView.postMessage('RN向H5发送的消息'); }}
在H5中注册监听
window.onload = function() { document.addEventListener('message', function(msg) { console.log(msg) message = msg.data; }); }2.2 H5向RN发送消息
在RN端通过onMessage接收消息
onMessage={(event) => {console.log(event.nativeEvent.data);}}
网页端的 window.postMessage 只发送一个参数 data,此参数封装在 RN 端的 event 对象中,即 event.nativeEvent.data。data 只能是一个字符串。
H5发送消息,此时只能传递string类型
window.postMessage('网页向rn发送的消息');
查看更多关于React Native之网页组件WebView的使用与通信的详细内容...