React Native:是否可以在 webview 中设置 html 内容的高度? [英] React native: Is it possible to have the height of a html content in a webview?
问题描述
我从 api 获取 html 内容，我想在我的应用程序中将其呈现为 Web 视图.
I'm getting html content from an api and I want to render it as a web view in my application.
webview 组件嵌套在滚动视图中，因为它在我的渲染函数上方还有一些其他内容，如下所示:
The webview component is nested in a scrollview because it has some other contents above my render function is something like this:
render() {
var html = '<!DOCTYPE html><html><body>' + this.state.pushEvent.Description + '</body></html>';
return (
<ScrollView>
<View style={styles.recipe}>
<Image source={{uri: this.state.pushEvent.ImageUrl}}
style={styles.imgFull} />
<Text style={styles.title}>{this.state.pushEvent.Title}</Text>
<WebView style={{padding: 20}}
automaticallyAdjustContentInsets={false}
scrollEnabled={false}
html={html}>
</WebView>
</View>
</ScrollView>
);
}问题是我的 html 只有 20pt 高，这是我的填充.有没有什么巧妙的方法来获取内容的高度?
The problem is that my html is just 20pt high that is my padding. Is there a clever way to get the height of the content?
推荐答案
正如我在上面的评论中所写的，这就是我的想法，但我仍然认为应该有更好的解决方案.
As I wrote on the comment above this is what I came out with, but I'm still thinking that there should be a better solution.
这是我从 github 上获得的灵感的问题:@hedgerwang answer
Here is the issue on github I took inspiration from: @hedgerwang answer
在我的 var html 中，我在结束 body 标签之前添加了一个简单的脚本，我只是将 html 的高度保存在我的文档标题中:
In my var html I added a simple script just before the closing body tag, I simply save the height of my html in my document title:
<script>window.location.hash = 1;document.title = document.height;</script>
然后我在我的 WebView 组件中添加了 onNavigationStateChange 道具，并通过回调设置状态高度"变量，然后将此高度设置为我的 WebView.正如我所说，这确实奏效了，在更改 WebView 中的内容时只有一点点闪烁，但我认为这是一个肮脏的黑客.
then I added onNavigationStateChange props in my WebView component with a callback that set a state "height" variable and then set this height to my WebView. As I said, that did the trick, with just a little flahsing while changing the content in the WebView, but I think it's a dirty hack.
最后我决定更改 api 以包含我不必包含在 WebView 中的内容
At the end I decided to change the api to have something that I don't have to include in a WebView
但也许这会有所帮助，这里是完整的代码.
But maybe this can help, here the full code.
onNavigationStateChange(navState) {
this.setState({
height: navState.title,
});
}
render() {
var html = '<!DOCTYPE html><html><body>' + this.state.pushEvent.Description + '<script>window.location.hash = 1;document.title = document.height;</script></body></html>';
return (
<ScrollView>
<View style={styles.recipe}>
<Image source={{uri: this.state.pushEvent.ImageUrl}}
style={styles.imgFull} />
<Text style={styles.title}>{this.state.pushEvent.Title}</Text>
<WebView style={{padding: 20}}
automaticallyAdjustContentInsets={false}
scrollEnabled={false}
onNavigationStateChange={this.onNavigationStateChange.bind(this)}
html={html}>
</WebView>
</View>
</ScrollView>
);
}
这篇关于React Native:是否可以在 webview 中设置 html 内容的高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
