如何使 React Native Webview 自动高度答案

【问题标题】：How to make React Native Webview auto height如何使 React Native Webview 自动高度
【发布时间】：2021-06-19 06:45:19
【问题描述】：

我需要在我的 React Native 应用程序中呈现一些 HTML 代码。但似乎 WebView 无法设置为自动高度。请帮我解决这个问题。这是我的代码。

<View style={{
                    paddingLeft: 18,
                    paddingRight: 18,
                    paddingTop: 10,
                    paddingBottom: 10,
                }}>
                    <WebView source={{
                        html: HTML
                    }}
                        javaScriptEnabled={true}
                        style={{
                            height: 200,
                            backgroundColor: colors.white,
                            marginTop: 20
                        }} />
                </View>

正如您在此处看到的，我需要为 height 属性定义一个特定值。如何根据内部 HTML 内容高度使其高度动态化？

【问题讨论】：

标签： javascript reactjs react-native react-native-webview

【解决方案1】：

我建议你使用react-native-autoheight-webview，它为你提供 React Native 的自动高度 webview。

您可以在这里查看 - https://www.npmjs.com/package/react-native-autoheight-webview

【讨论】：

注意：如果有高度问题，请将 scalesPageToFit={true} 改为 scalesPageToFit={false}

【解决方案2】：

我将 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>

这是我得到答案的地方，请给他信任...React native: webview height

【讨论】：

minHeight 与 height prop 一样
是的，但它还有其他用途......为什么不试试呢:)
你直接从这里复制的 - stackoverflow.com/questions/35446209/…
如果它有效，请随意投票并检查它作为答案，以帮助其他遇到同样问题的人
我真的不想要那些我真的很喜欢帮助别人的点