反应本机：webview高度

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

以及以下建议的所有解决方案：

但不幸的是，这些似乎都不适合我， 我理解他们建议的解决方法是将标题设置为高度，但就我而言，标题似乎总是保持不变，即： “text/html…”和我的html的其余部分。 我从API中获取html内容，它没有主体、头部或html标记，我还尝试将这些标记手动添加到html中，但似乎没有任何效果

---

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

显然，问题是我有

javaScriptEnabled={false}

---

启用后，一切正常。

我将WebView包装在视图中，并设置与视图的高度

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

我只是遵循这个指南：并成功地完成了我的工作。以下是解决方案： 1.定义脚本以在加载网站后将文档高度发送到本机环境。 2.处理webview组件的设置并通过状态重置高度

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>

const webViewScript=`
setTimeout（函数（）{
window.postMessage（document.documentElement.scrollHeight）；
}, 500);
对；//注意：这是必需的，否则有时会出现无声故障
`;
...
建造师（道具）{
超级（道具）；
此.state={
网高：100，
}
...
{
this.setState（{webheight:parseInt（event.nativeEvent.data）}）；
}}
javaScriptEnabled={true}
injectedJavaScript={webViewScript}
domStorageEnabled={true}
>

---

希望对你有所帮助

使用package react native autoheight webview

webview具有默认样式。如果要设置高度，还需要添加

flex:0

，如下所述：

---

请注意，有默认样式（例如：如果要使用“高度”属性，则需要将flex:0添加到样式中）。

我浪费了一整天来解决高度问题，但最后不得不转移到另一个库中 这个简单又好

---

我推荐react native autoheight webview。 这对我来说是完美的工作。

---

此行为的可靠实现是使用库中的钩子。 后者允许将“功能”注入

网络视图

，例如脚本和行为。 在本例中，我们将使用3个特性+上述挂钩：

• HandleHTMLDimensionsFeature

  ，该功能是

  使用AutoHeight

  钩子获取文档大小更新所必需的

• ForceResponsiveViewportFeature

  解决问题

• ForceElementSizeFeature

  解决方法

此组件应可用于任何网页

从“React”导入React；
导入makeWebshell{
HandleHTMLDimensionsFeature，
ForceResponsiveViewportFeature，
ForceElementSizeFeature，
使用自动高度
}来自“@worldwebview/webshell”；
从“react native WebView”导入WebView；
const Webshell=makeWebshell(
网络视图，
新HandleHTMLDimensionsFeature（），
新的ForceResponsiveViewportFeature（{maxScale:1}），
新ForceElementSizeFeature({
目标:"身体",，
heightValue:'自动'，
宽度值：“自动”
})
);
导出默认函数ResilienceTautoHeightWebView（props）{
const{autoheightWebshellProps}=useAutoheight({
Webshell道具：道具
});
返回；
}

更多资源：

---

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

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;

import React，{useState}来自“React”；
从“react native WebView”导入WebView；
const DynamicHeightWebView=（道具）=>{
const[height，setHeight]=useState（0）；
const webViewScript=`
setTimeout（函数（）{
window.ReactNativeWebView.postMessage（document.documentElement.scrollHeight）；
}, 500);
true；//注意：这是必需的，否则有时会出现无声故障
`;
返回{
setHeight（parseInt（event.nativeEvent.data））；
}}
javaScriptEnabled={true}
injectedJavaScript={webViewScript}
domStorageEnabled={true}
useWebKit={true}
/>
}
导出默认DynamicLightWebView；
像下面这样使用
postMessage
和
onMessage
非常适合我。
归功于

onWebViewMessage=（事件：WebViewMessageEvent）=>{
this.setState（{webViewHeight:Number（event.nativeEvent.data）}）
}
render（）{
返回(
)
}
我也有同样的问题，我在我的webview中添加了javaScriptEnabled={true}和JavaScriptEnabledDroid={true}，但在第一次加载webview时，它将返回“text/html…”，然后webview将以精确的高度工作。我不知道怎么修。你能给我你的解决方案吗？你的包装技巧在我的项目中起了作用。你节省了我的时间，谢谢。如何将高度设置为“自动”。设置自动高度不起作用。。我还在webview中制作vimeo视频。但对我来说，安卓系统中的“全屏”按钮并没有出现在安卓系统中。为什么呢？请帮忙，谢谢。这对本地人起了作用。我只需对使用
useWebKit={true}
做一点小改动，否则它对我不起作用。它使用
window.reactivewebview.postMessage
而不是
window.postMessage
仍然有效！！！！！快速提示：将默认值设置为1000而不是100，并让其收缩。这创造了更好的解决方案，thanksIt并不完美。对于许多缺少onFinished方法的HTML代码，返回不正确的高度，所以在完成渲染后，我们永远不会知道视图的确切高度。
 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>
    )
  }