react-native WebView高度计算

最新推荐文章于 2023-08-09 21:17:37 发布

在下月亮有何贵干

最新推荐文章于 2023-08-09 21:17:37 发布

阅读量714

点赞数 1

分类专栏： react-native 开发工作中的小问题文章标签： webview javascript react native 前端 react-native

本文链接：https://blog.csdn.net/weixin_43877799/article/details/121854127

版权

开发工作中的小问题同时被 2 个专栏收录

30 篇文章 1 订阅

订阅专栏

react-native

8 篇文章 4 订阅

订阅专栏

方法一（postMessage与onMessage）

const BaseScript = `
(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);
} ())
`;

  onMessage(event) {
    try {
      const action = JSON.parse(event.nativeEvent.data);
      if (action.type === 'setHeight' && action.height > 0) {
        this.setState({ height: action.height });
      }
    } catch (error) {
    
    }
  }

  <WebView
    originWhitelist={['*']}
    injectedJavaScript={BaseScript}
    style={{
      width: '100%',
      height: this.state.height,
    }}
    javaScriptEnabled 
    domStorageEnabled 
    onMessage={this.onMessage.bind(this)}
    source={{ html: html, baseUrl: '' }}
  />

方法二（onNavigationStateChange）

html也许是接口中异步请求来的内容，因此用三元表达式确保html存在再显示，否则会出现高度为空的情况。

const { height= 0, html='' }=this.state

    const lastHtml = `
    <!DOCTYPE html>
      <html>
      <body>
        ${html}
      <script>
        window.οnlοad=function(){
          window.location.hash = 1;
          document.title = document.body.clientHeight;
        }
      </script>
      </body>
      </html>
    `;

 {html ? (
    <View style={{ height }}>
      <WebView
        originWhitelist={['*']}
        style={{
          width: '100%',
        }}
        contentInset={{ top: 0, left: 0 }}
        javaScriptEnabled 
        domStorageEnabled
        scrollEnabled={false}
        onNavigationStateChange={(state) => {
          if (parseInt(state.title, 10)) {
            this.setState({
              height: parseInt(state.title, 10) + 20,
            });
          }
        }}
        source={{ html: lastHtml, baseUrl: '' }}
      />
    </View>
 ) : null}