ReactNative H5 页面显示 react-native-webview 高度自适应

最新推荐文章于 2025-06-06 09:05:52 发布

dabusidede

最新推荐文章于 2025-06-06 09:05:52 发布

阅读量562

点赞数 1

CC 4.0 BY-SA版权

分类专栏： ReactNative

本文链接：https://blog.youkuaiyun.com/dabusidede/article/details/108938055

ReactNative 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何在ReactNative应用中使用WebView并实现高度自适应。通过引入react-native-webview包，结合简单示例和高度自适应策略，确保H5页面在ReactNative环境中能正确显示并自动调整高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装包

react-native-webview

简单示例

import React from 'react'
import WebView from 'react-native-webview'

class Component extends React.Component {
    createHtml() {
        return `
        <div id="canvas" style=""></div>
        <script>
            window.onload = function () {
            }
        </script>
        `
}

    render() {
        return (
            <WebView
                source={{ html: this.createHtml() }}
            />
        );
    }
}

export default Component;

高度自适应

import React from 'react'
import WebView from 'react-native-webview'

interface Props {
    html: string
}

export default class IEWebView extends React.Component<Props> {
    state = {
        webHeight: 0
    }

    constructor(props) {
        super(props);
    }

    createHtml(html) {
        return `
        <body style="margin: 0px">
            <div id="__container__">
                ${html}
                <div></div>
            </div>
            <script>
                var oldonload = window.onload;//得到上一个onload事件的函数

                window.onload = function () {
                    if (typeof oldonload == 'function') {
                        oldonload();
                    } 

                    setTimeout(()=>{
                        // 向 WebView 发送消息
                        let webHeight = document.getElementById("__container__").clientHeight;
                        window.ReactNativeWebView.postMessage(webHeight);
                    }, 1)
                }
            </script>
        <body>
        `
    }

    onMessage = (msg) => {
        console.log("--------------------------")
        console.log(msg.nativeEvent)

        if (msg.nativeEvent.data !== undefined && msg.nativeEvent.data !== null) {
            let height = parseInt(msg.nativeEvent.data);
            if (isNaN(height)) {
                height = 0;
            }
            this.setState({
                webHeight: height
            });
        }
    }

    render() {
        console.log(this.createHtml(this.props.html));
        return (
            <WebView
                style={{ width: '100%', height: this.state.webHeight }}
                javaScriptEnabled={true}
                source={{ html: this.createHtml(this.props.html) }}
                onMessage={this.onMessage}
                scalesPageToFit={false}
            />
        );
    }
}