react-native WebView 自适应高度

最新推荐文章于 2025-04-11 17:35:50 发布

小白的成长之路_

最新推荐文章于 2025-04-11 17:35:50 发布

阅读量564

点赞数

分类专栏： react-native 文章标签： react native

本文链接：https://blog.youkuaiyun.com/XiaoZhuang__/article/details/116131142

版权

本文介绍了如何在React Native中实现WebView组件的高度自适应，针对Android和iOS平台提供了不同的策略，确保在不同操作系统下都能正确显示网页内容。

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

自适应高度，区分android 和ios

/**
 * Created by ke2933 on 2018/11/08
 * WebModul WebView 封装
 *  webContent      WebView 内容
 */

import React, { Component } from 'react';
import { StyleSheet, Text, View, WebView, Alert, ScrollView } from 'react-native';
const BaseScript =
    `
    (function () {
        var height = null;
        function changeHeight() {
          if (document.body.scrollHeight != height) {
            height = document.body.scrollHeight;
            if (window.postMessage) {
              window.postMessage(JSON.stringify({
                type: 'setHeight',
                height: height,
              }))
            }
          }
        }
        setTimeout(changeHeight, 300);
    } ())
    `

export default class TabNav extends Component {
    static defaultProps = {
        webContent: "",
    };
    constructor(props) {
        super(props);
        this.state =

最低0.47元/天解锁文章