react-native webview自适应高度异常，长空白

最新推荐文章于 2024-06-14 20:39:43 发布

qq_41750859

最新推荐文章于 2024-06-14 20:39:43 发布

阅读量527

点赞数

分类专栏： react-native 文章标签： react.js reactjs

本文链接：https://blog.csdn.net/qq_41750859/article/details/124314711

版权

react-native 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

import React, {useState} from 'react';
import {WebView} from 'react-native-webview';

const baseScript = () => {
  return `
  var height = null;
  function changeHeight() {
    if (document.body.scrollHeight != height) {
      height = document.body.scrollHeight;
      if (window.postMessage) {
        window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'setHeight', height: height,}));
      }
    }
  }
  changeHeight();
  
  true;
`;
};

const AutoHeightWebView = ({
  htmlText = '',
  customStyle = '',
  style = {},
  customHeight = 200,
  minHeight,
  androidHardwareAccelerationDisabled = false,
}) => {
  const ref = React.useRef();
  const [height, setHeight] = useState(customHeight);
  let defaultStyle = `
  <style type="text/css">
    body { background-color: #ffffff; margin: 0; }
    div { padding-bottom: 20px; }
    p { margin: 16px 0; color: #5d5d5d; }
  </style>
  `;
  let html = `
    <!DOCTYPE html>
    <html>
      <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">
      ${customStyle ? customStyle : defaultStyle}
      <body>
      <div id="_div">
        ${htmlText}
        </div>
      </body>
    </html>
  `;

  const handleMessage = e => {
    try {
      const action = JSON.parse(e.nativeEvent.data);
      if (
        action.type === 'setHeight' &&
        action.height > 0 &&
        action.height !== height
      ) {
        setHeight(
          minHeight
            ? action.height < minHeight
              ? minHeight
              : action.height
            : action.height,
        );
      }
    } catch (error) {
      // pass
    }
  };

  return (
    <WebView
      ref={ref}
      containerStyle={[{height: height}, style]}
      incognito={false}
      originWhitelist={['*']}
      automaticallyAdjustContentInsets={false}
      source={{html: html, baseUrl: ''}}
      scalesPageToFit={false}
      scrollEnabled={false}
      showsHorizontalScrollIndicator={false}
      showsVerticalScrollIndicator={false}
      onMessage={handleMessage}
      androidHardwareAccelerationDisabled={androidHardwareAccelerationDisabled}
      onLoadEnd={() => {
        ref.current.injectJavaScript(baseScript());
      }}
    />
  );
};

export default AutoHeightWebView;