Question

我从api获取html内容，我希望在我的应用程序中将其呈现为Web视图。

webview组件嵌套在scrollview中，因为它在我的渲染函数上面有一些其他内容是这样的：

＆＃13;

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

＆＃13;

问题是我的html只有20pt高，这是我的填充。是否有一种聪明的方法来获得内容的高度？

Answer 1

正如我在上面的评论中写的那样，这就是我的结果，但我仍然认为应该有更好的解决方案。

以下是关于github的问题我从以下方面获取灵感：@hedgerwang answer

在我的var html中，我在关闭body标签之前添加了一个简单的脚本，我只是将html的高度保存在我的文档标题中：

<script>window.location.hash = 1;document.title = document.height;</script>

然后我在我的WebView组件中添加了onNavigationStateChange道具，其回调设置了一个状态＆＃34; height＆＃34;变量然后将此高度设置为我的WebView。就像我说的那样，这就是诀窍，只是在更改WebView中的内容时稍微有些不同，但我认为这是一个肮脏的黑客。

最后，我决定更改api以获得一些我不必包含在WebView中的内容

但也许这可以提供帮助，这里是完整的代码。

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

Answer 2

有一种更好的方法：您可以使用 injectJavaScript 属性注入自定义JS。评估结果将以您在 onNavigationStateChange 中收到的事件对象结束。这样您就不必修改HTML本身或劫持title属性。

请参阅https://gist.github.com/dbasedow/ed6e099823cb8d5ab30e以获取示例

Answer 3

这个组件对我来说非常适合。它调整webview以适应内容并返回渲染的html的高度。

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

并改变

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

的

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

位于文件顶部。

Answer 4

唯一可靠的方法是通过注入Javascript属性中的postMessage（就像this component中一样。

在其中传递document.scrollHeight，一切都准备就绪。

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

Answer 5

您可以使用@formidable-webview/webshell库提供的HandleHTMLDimensionsFeature。它将使用injectedJavaScript在WebView中运行脚本。这是您将如何使用它：

import React from 'react';
import makeWebshell, {
  HandleHTMLDimensionsFeature
} from '@formidable-webview/webshell';
import WebView from 'react-native-webview';

const Webshell = makeWebshell(
  WebView,
  new HandleHTMLDimensionsFeature()
);

export default function AugmentedWebview(props) {
  const onDocumentDimensions = React.useCallback(
    (dimensions) => {
      console.info(dimensions.content);
    },
    []
  );
  return (
    <Webshell
      onDOMHTMLDimensions={onDocumentDimensions}
      {...props}
    />
  );
}

该脚本在Web环境is available here中运行。每次文档大小更改时，都会动态发送尺寸。该脚本将按照优先顺序使用WebView中可用的最佳API， ResizeObserver， MutationObserver 最后，定期进行轮询。如果您要寻找自动高度WebView，check out this guide。

React native：是否可以在webview中获得html内容的高度？

5 个答案: