如何使 React Native Webview 自动高度

Question

我需要在我的 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 内容高度使其高度动态化？

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

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

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

如何使 React Native Webview 自动高度

How to make React Native Webview auto height

javascript

reactjs

react-native

react-native-webview