美文网首页
ReactNative WebView 与H5页面的交互

ReactNative WebView 与H5页面的交互

作者: 天色将变 | 来源:发表于2020-04-03 12:41 被阅读0次
    安装webview包

    使用的是:react-native-webview

    npm install react-native-webview --save
    
    ReactNative

    webview设置:

                    <WebView
                            originWhitelist={['*']}
                            useWebKit
                            bounces={false}
                            key={`__webViewKey_${key}`}
                            ref={(ref) => { this.webview = ref; }}
                            userAgent={userAgent}
                            javaScriptEnabled
                            domStorageEnabled={false}
                            onMessage={this.onMessage.bind(this)}
                            injectedJavaScript={injectedJS}
                            source={source}
                            onLoad={this.webviewload.bind(this)}
                            onLoadEnd={this.onLoadEnd.bind(this)}
                            onError={this.onError}
                            renderError={this.renderError}
                        />
    

    injectedJavaScript:要执行的js代码

    • 如果没有,可以注释掉当前行。
    • 如果有:类似于这种格式:
    // javascript后执行是要执行的js代码,可以做一些初始化内容如window.env = release等,也可以调用js的方法。
    var injectedJS = 'javascript:JSClass.method();';
    

    也可以使用webview主动调用:

    this.webview.injectJavaScript('javascript:JSClass.method();');
    

    webview的几个相关方法

    • onMessage接收H5发送来的消息
    • 注意下面方法中的webviewload(),将window.postMessage注入给了js,那么js就可以用window.postMessage()向RN发送消息了
    constructor(props) {
            super(props);
            this.state = {
                // source: { uri: `http://www.baidu.com` },
                source: { uri: 'file:///android_asset/h5plugin/Test.html' },
                userAgent: '',
                key: 'key',
                isShowHeader: true,
                headerTitle: 'H5插件',
            }
        }
    
     onMessage = (event) => {
            // 接受h5发送来的消息
            console.log('接收H5发来的消息onMessage', event.nativeEvent.data);
            const key = 'close';
            switch(key){
                case 'close'://关闭当前页面
                
                break;
                case 'photo':// 打开相册相机
    
                break;
                case 'phone':// 拨号
    
                break;
                default:
    
    
            }
        }
    
        getInjectedJS = () => {
            const token = '123';
            const projectId = '456';
            return `
                    window.token = '${token}'; 
                    window.projectId = '${projectId}';
            `;
        }
    
        webviewload() {
            this.webview.injectJavaScript(`(function() {
                window.postMessage = function(data) {
                  window.ReactNativeWebView.postMessage(data);
                };
              })()`);
        }
    
        onLoadEnd = () => {
            // 向H5发送消息
            this.webview.postMessage('RN向H5发送的消息');
        }
    
        onError = (err) => {
            console.log('onError', err);
        }
    
        renderError = (err) => {
            console.log('renderError', err);
        }
    
    H5
    • 接收webview注入的信息injectedJavaScript={injectedJS},相当于在<script>中直接写代码
    • 接收RN发送过来的消息document.addEventListener("message", function (event){}),在RN那里是this.webview.postMessage('RN向H5发送的消息');
    • H5向RN发送消息:window.postMessage('H5向rn发送的消息');
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>H5pluginTest</title>
        <style>
            html,
            body {
                height: 100%;
                margin: 0;
                padding: 0
            }
        </style>
    </head>
    
    <body>
        <div id="model" style="width:100%; height:100%;text-align:left;">
            h5页面
        </div>
        <script>
            window.onload = function () {
                //接受rn发送过来的消息
                document.addEventListener("message", function (event) {
                    // 展示rn发送来的消息
                    alert(event.data)
    
                    // 展示注入的数据
                    alert(window.token);
    
                    // 向rn发送消息
                    window.postMessage('H5向rn发送的消息');
                });
            }
        </script>
    </body>
    
    </html>
    

    相关文章

      网友评论

          本文标题:ReactNative WebView 与H5页面的交互

          本文链接:https://www.haomeiwen.com/subject/hplhphtx.html