React Native之网页组件WebView的使用与通讯

时间 2019-11-11

标签 react native 网页组件 webview 使用通讯栏目 React 繁體版

原文原文链接

在实际开发中，咱们一般会嵌入一些html页面，官方为咱们提供了一个很是好用的网页组件WebView，经过这个组件咱们能够经过传入一个url或者是传入一段htmlhtml

一. 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的方法，从而实现通讯）html5

须要注意的是，injectedJavaScript注入的必须是JS，注入的内容能够是方法的实现也能够是方法名。其实注入函数名的时候，实际上注入的仍然是函数的实现。当注入js方法名须要传递参数的时候，能够提早将函数名做为字符串，函数参数做为变量，经过生成一个字符串而后再讲字符串注入。java

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;" id="call">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的名字。git

2.WebView和H5相互发送监听消息

该方式能够双向发送消息github

2.1 RN端向H5发送消息

WebView绑定ref，经过html5新增的postMessage发送消息web

onLoadEnd={() => {
     this.refs.webView.postMessage('RN向H5发送的消息');
 }}

在H5中注册监听dom

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 只能是一个字符串。post

H5发送消息，此时只能传递string类型flex

window.postMessage('网页向rn发送的消息');