React native:webview height

Question

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

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

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

以及建议的所有解决方案: React native:是否可以在webview中获得html内容的高度？

但不幸的是,这些似乎都不适合我,我明白他们所有建议的解决方法是将标题设置为高度,但在我的情况下,似乎标题总是保持相同的是:"text/html .. .."和我的其余部分.我从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. 定义脚本以在加载网站后将文档高度发送到本机 env。2、处理webview组件的onMesssage，通过state重置Height。

const webViewScript = `
  setTimeout(function() { 
    window.postMessage(document.documentElement.scrollHeight); 
  }, 500);
  true; // note: this is required, or you'll sometimes get silent failures
`;


...
constructor(props) {
    super(props);
    this.state = {
      webheight:100,
    }

...

<WebView style={{height: this.state.webheight}}
  automaticallyAdjustContentInsets={false}
  scrollEnabled={false}
  source={{uri: "http://<your url>"}}
  onMessage={event => {
    this.setState({webheight: parseInt(event.nativeEvent.data)});
  }}
  javaScriptEnabled={true}
  injectedJavaScript ={webViewScript}
  domStorageEnabled={true}
></WebView>

希望有所帮助！

Answer 3

使用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 4

此行为的可靠实现是使用useAutoheight来自@formidable-webview/webshel​​l库的钩子。后者允许将“特性”注入到WebViews，例如脚本和行为中。在这个例子中，我们将使用 3 个特征 + 前面提到的钩子：

• HandleHTMLDimensionsFeature这是由需要useAutoheight挂钩来获得文件大小更新;
• ForceResponsiveViewportFeature解决移动虚拟视口；
• ForceElementSizeFeature解决循环大小限制

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

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} />;
}

更多资源：

• 在世博会上试试这个
• 完整指南在这里。

Answer 5

显然问题出在我身上javaScriptEnabled={false}。

启用后一切正常。