可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I'm getting html content from an api and I want to render it as a web view in my application.

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>
    );
  }

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?

回答1:

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>
);
}

回答2:

There is a better way to do it: you can inject custom JS with the injectedJavaScript property. The result of the evaluation will end up in the event object you receive in your onNavigationStateChange. This way you won't have to modify the HTML itself or hijack the title property.

See https://gist.github.com/dbasedow/ed6e099823cb8d5ab30e for an example

回答3:

This component worked perfectly for me. It adjusts the webview to fit the content and returns the height of the rendered html.

https://gist.github.com/epeli/10c77c1710dd137a1335

And change

import React, {WebView, View, Text} from "react-native";

for

import React from "react";
import {WebView, View, Text} from "react-native";

at the top of the file.

回答4:

The only reliable way for doing this is through postMessage, in the injectedJavascript prop (just as in this component.

Pass document.scrollHeight in there and you're all set.

const jsString = `
  function post () {
    postMessage(
      Math.max(document.documentElement.clientHeight, document.documentElement.scrollHeight, document.body.clientHeight, document.body.scrollHeight)
    );
  }
  setTimeout(post, 200);
// other custom js you may want
`


// component class:
  _onMessage = (e) => {
    this.setState({
      webviewHeight: parseInt(e.nativeEvent.data)
    });
  }
  render() {
    return (
      <WebView
        source={yourURL}

        injectedJavascript={jsString}
        onMessage={this._onMessage}

        style={{ height: webviewHeight }}
      />
    )
  }