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.
Here is the issue on github I took inspiration from: @hedgerwang answer
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>
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.
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>
);
}
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…