ReactNative WebView 内容高度计算在 iOS 上运行良好，但在 Android 上它给出的高度比实际内容高

Question

我正在使用 web 视图在 react native 中加载我的富文本编辑器 html 内容。问题是我需要一个接一个地垂直渲染多个 webview。并且 webview 需要一个明确的高度来加载内容。所以，经过搜索，我找到了this article 它帮助我根据内容识别高度。

iOS 上的内容高度工作正常。但在 Android 上，如果实际内容高度为“1756”，则计算为“8884”。

    import React, { Component } from "react";
    import { View } from "react-native";
    import { WebView } from 'react-native-webview';
    import {
        widthPercentageToDP as wp,
        heightPercentageToDP as hp
    } from "react-native-responsive-screen";
    import _ from 'lodash';

    const exampleHtml = `<p style="box-sizing: border-box; margin: 0px; padding: 10px 0px; overflow-wrap: break-word; color: rgb(0, 0, 0); font-family: OpenSans-Regular; font-size: 17px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><strong style="box-sizing: border-box; margin: 0px; padding: 0px;">Google Pixel 4a: What the design could be like</strong></p>
    <p style="box-sizing: border-box; margin: 0px; padding: 10px 0px; overflow-wrap: break-word; color: rgb(0, 0, 0); font-family: OpenSans-Regular; font-size: 17px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">Ahead of the Pixel 4a&#39;s launch, we seen the phone being leaked a number of times. The recent leaks, including a hands on video of the phone, leaked live images have revealed in detail the Pixel 4a&#39;s design.</p>
    <p style="box-sizing: border-box; margin: 0px; padding: 10px 0px; overflow-wrap: break-word; color: rgb(0, 0, 0); font-family: OpenSans-Regular; font-size: 17px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">They show that the Pixel 4a could come with curved edges with thin bezels on it. It is tipped to get a punch-hole design on the display with a single front-facing camera. The back has a squarish camera bump with a single camera and an LED flash, positioned diagonally inside the module. At the center of the smartphone is a circular fingerprint sensor, leading us to believe that Google might skip face unlock on the Pixel 4a.</p>
    <p style="box-sizing: border-box; margin: 0px; padding: 10px 0px; overflow-wrap: break-word; color: rgb(0, 0, 0); font-family: OpenSans-Regular; font-size: 17px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><strong style="box-sizing: border-box; margin: 0px; padding: 0px;">Pixel 4a: Features</strong></p>
    <p style="box-sizing: border-box; margin: 0px; padding: 10px 0px; overflow-wrap: break-word; color: rgb(0, 0, 0); font-family: OpenSans-Regular; font-size: 17px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">The Pixel 4a is also expected to be a feature rich phone. However, the phone is tipped to not come with Face Unlock feature. Instead, the phone could instead just go for a capacitive fingerprint scanner at the back. If this happens, it will all but mean that the phone will skip on Face Unlock tech.</p>
    <p style="box-sizing: border-box; margin: 0px; padding: 10px 0px; overflow-wrap: break-word; color: rgb(0, 0, 0); font-family: OpenSans-Regular; font-size: 17px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">But on the other hand, it should get the Now Playing feature and the new Google Assistant. And considering it&#39;s a Pixel smartphone, Google should also bring some of its most loved camera features to the device.</p>`;

    class HtmlParser extends Component {
        constructor(props) {
            super(props);
            this.state = {
                Height: '100%',
            };
        }

        onNavigationChange(event) {
            if (event.title) {
                let htmlHeight = Number(event.title) //convert to number
                htmlHeight = isNaN(htmlHeight) ? 0 : htmlHeight + 20;
                this.setState({ Height: htmlHeight});
            }
        }

        render() {
            const { Height } = this.state;
            const script = `
                <script>
                    window.location.hash = 1;
                    var calculator = document.createElement("div");
                    calculator.id = "height-calculator";
                    while (document.body.firstChild) {
                        calculator.appendChild(document.body.firstChild);
                    }
                    document.body.appendChild(calculator);
                    document.title = calculator.clientHeight;
                true;
                </script>
                `;
            const style = `
                <style>
                body, html, #height-calculator {
                    margin: 0;
                    padding: 0;
                }
                #height-calculator {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                }

                </style>
                `;
            const rawHtml = '<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1"></head><body style="font-size:20px;">' + exampleHtml + '</body></html>'

            return (
                <View
                    style={{
                        paddingHorizontal: 10
                    }}
                >
                        <WebView
                            useWebKit={true}
                            source={{ html: rawHtml + script + style }}
                            style={{
                                minWidth: wp('95%'),
                                minHeight: Height,
                            }}
                            scrollEnabled={true}
                            onNavigationStateChange={this.onNavigationChange.bind(this)}
                        />
                </View>
            );
        }
    }

    export default HtmlParser;

Answer 1

需要这种方式我用过这个，效果很好。

就像我有一台 1080x1920 的设备

The vertical number we calculate from height **hp**
height:200
200/1920*100 = 10.41% - height:hp("10.41%")


The Horizontal number we calculate from width **wp**
width:200
200/1080*100 = 18.51% - Width:wp("18.51%")

它适用于所有设备