Question

嗨，我知道这是一个已知问题，关于webview在本机中的自动高度，我已经尝试了我在互联网上找到的所有可能的解决方案，例如：

https://gist.github.com/epeli/10c77c1710dd137a1335

https://github.com/danrigsby/react-native-web-container/blob/master/index.js

以及建议的所有解决方案： React native: Is it possible to have the height of a html content in a webview?

但不幸的是，这些似乎都不适合我，我知道他们所有建议的解决方法是将标题设置为高度，但在我的情况下，似乎标题始终保持不变，即：＆＃34; text / html ....＆＃34;和我的其余部分。我从API获取html内容，它没有body，head或html标签，我也尝试手动将这些标签添加到html中，似乎没有任何效果。

我很想知道其他人是否有这个问题以及如何解决这个问题。

Answer 1

我将WebView包装在View中，并从View中设置高度。

<View style={{ height: 200 }}>
  <WebView
    automaticallyAdjustContentInsets={false}
    source={{uri: 'https://player.vimeo.com/video/24156534?title=0&byline=0&portrait=0'}}
  />
</View>

Answer 2

我只是遵循以下指南：https://github.com/react-native-community/react-native-webview/blob/master/docs/Guide.md#communicating-between-js-and-native，并成功完成了我的工作。这是解决方案： 1.定义脚本，以在加载网站后将文档高度发送到本机环境。 2.处理webview组件的消息，并通过状态重置高度。

str.join

希望有帮助！

Answer 3

显然问题是我有javaScriptEnabled={false}。

启用后，一切正常。

Answer 4

我建议react-native-autoheight-webview。这对我来说是完美的工作。 https://github.com/iou90/react-native-autoheight-webview

Answer 5

我制作了一个小组件，让这个功能可以重用，如果它对任何人有帮助的话！

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

const DynamicHeightWebView = (props) => {
  const [height, setHeight] = useState(0);
  const webViewScript = `
    setTimeout(function() { 
      window.ReactNativeWebView.postMessage(document.documentElement.scrollHeight); 
    }, 500);
    true; // note: this is required, or you'll sometimes get silent failures
  `;
  return <WebView
    {...props}
    style={{
      ...props.style,
      height: height,
    }}
    automaticallyAdjustContentInsets={false}
    scrollEnabled={false}
    onMessage={event => {
      setHeight(parseInt(event.nativeEvent.data));
    }}
    javaScriptEnabled={true}
    injectedJavaScript ={webViewScript}
    domStorageEnabled={true}
    useWebKit={true}
  />
}

export default DynamicHeightWebView;

Answer 6

像下面这样使用 postMessage 和 onMessage 非常适合我。归功于iamdhj

 onWebViewMessage = (event: WebViewMessageEvent) => {
    this.setState({webViewHeight: Number(event.nativeEvent.data)})
  }

  render() {
    return (
      <ScrollView>
        <WebView
          style={{ height: this.state.webViewHeight }}
          source={{html: '...'}}
          onMessage={this.onWebViewMessage}
          injectedJavaScript='window.ReactNativeWebView.postMessage(document.body.scrollHeight)'
        />
      </ScrollView>
    )
  }

Answer 7

使用包react-native-autoheight-webview

Answer 8

WebView具有默认样式。如果要设置高度，还需要添加flex: 0，如in the documentation所示：

请注意，有一些默认样式（例如：如果要使用height属性，则需要在样式中添加flex：0）。

Answer 9

我整天浪费时间解决高度问题，但最后我不得不转移到另一个图书馆这是一个简单而又好

https://github.com/archriss/react-native-render-html

Answer 10

此行为的可靠实现是使用@formidable-webview/webshell库中的useAutoheight钩子。后者允许将“功能”注入WebViews中，例如脚本和行为。在此示例中，我们将使用3个功能+上面提到的钩子：

HandleHTMLDimensionsFeature是useAutoheight挂钩所必需的，以获取文档大小更新；
ForceResponsiveViewportFeature解决mobile virtual viewport；
ForceElementSizeFeature解决cyclic size constraints

此组件应可用于任何网页。

import React from 'react';
import makeWebshell, {
  HandleHTMLDimensionsFeature,
  ForceResponsiveViewportFeature,
  ForceElementSizeFeature,
  useAutoheight
} from '@formidable-webview/webshell';
import WebView from 'react-native-webview';

const Webshell = makeWebshell(
  WebView,
  new HandleHTMLDimensionsFeature(),
  new ForceResponsiveViewportFeature({ maxScale: 1 }),
  new ForceElementSizeFeature({
    target: 'body',
    heightValue: 'auto',
    widthValue: 'auto'
  })
);

export default function ResilientAutoheightWebView(props) {
  const { autoheightWebshellProps } = useAutoheight({
    webshellProps: props
  });
  return <Webshell {...autoheightWebshellProps} />;
}

更多资源：

React native：webview height

10 个答案: