美文网首页
react-native WebView获取内容高度

react-native WebView获取内容高度

作者: 1二叁_a648 | 来源:发表于2018-11-29 13:51 被阅读0次

    使用WebView的injectedJavaScript和onMessage属性。ps:在低版本的RN中无法使用onMessage属性官方解释:

    injectedJavaScriptstring设置在网页加载之前注入的一段JS代码。

    onMessage function在webview内部的网页中调用`window.postMessage`方法时可以触发此属性对应的函数,从而实现网页和RN之间的数据交换。 设置此属性的同时会在webview中注入一个`postMessage`的全局函数并覆盖可能已经存在的同名实现。网页端的`window.postMessage`只发送一个参数`data`,此参数封装在RN端的event对象中,即`event.nativeEvent.data`。`data`只能是一个字符串。

    思路是使用injectedJavaScript注入一段js代码获取网页内容高度,然后调用window.postMessage方法把高度回调给onMessage方法,然后setState,改变webView高度,从而实现自适应。直接上代码:

    importReact, { Component }from'react'import{ WebView, Dimensions, ScrollView}from'react-native'constBaseScript =`

        (function () {

            var height = null;

            function changeHeight() {

              if (document.body.scrollHeight != height) {

                height = document.body.scrollHeight;

                if (window.postMessage) {

                  window.postMessage(JSON.stringify({

                    type: 'setHeight',

                    height: height,

                  }))

                }

              }

            }

            setTimeout(changeHeight, 300);

        } ())

        `constHTMLTEXT =`<h1>This HTML snippet is now rendered with native components !</h1>

        <img src="https://i.imgur.com/dHLmxfO.jpg?2" />`classAutoHeightWebViewextendsComponent{constructor(props) {super(props);this.state = ({height:0})  }/**

      * web端发送过来的交互消息

      */onMessage (event) {try{constaction =JSON.parse(event.nativeEvent.data)if(action.type ==='setHeight'&& action.height >0) {this.setState({height: action.height })      }    }catch(error) {// pass}  }  render () {return()  }}export default RZWebView

    相关文章

      网友评论

          本文标题:react-native WebView获取内容高度

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