React Native 原生RN嵌套webView，并自适应高度

最新推荐文章于 2024-08-22 09:36:46 发布

七月_代码君

最新推荐文章于 2024-08-22 09:36:46 发布

阅读量2.8k

点赞数

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

本文链接：https://blog.csdn.net/weixin_40166364/article/details/78038435

版权

本文介绍如何在React Native中封装一个能够自适应高度的WebView组件，适用于需要在原生应用中嵌入HTML内容的场景。通过示例展示，展示了组件使用后的效果。

摘要由CSDN通过智能技术生成

封装自适应高度的webView

import React, { Component } from 'react';
import {
    Text,
    WebView,
    ScrollView,
    PixelRatio,
    View,
    Platform,
    ActivityIndicator,
} from 'react-native';

let thisWebView=null;

export default class WebViewAutoheight  extends Component {
   
    constructor(e){
        super(e);
        this.state={
            defWebViewHeight:0,
        }
    }
    pxToDp(px) {
        return px;
    }

    _onLoadEnd(){
        const script = `window.postMessage(document.body.scrollHeight)`;
        thisWebView && thisWebView.injectJavaScript(script);
    }
    _onMessage (e) {
        let valToInt= parseInt(e.nativeEvent.data);
        let defWebViewHeight=this.pxToDp(valToInt);
        if(defWebViewHeight != this.state.defWebViewHeight) this.setState({defWebViewHeight});
    }
    //注入html代码让h5调用
    _getInjectedJavaScript(){
        const patchPostMessageFunction = ()=> {
            let originalPostMessage = window.postMessage;
            let patchedPostMessage = (message, targetOrigin, transfer)=> {
                originalPostMessage(message, targetOrigin, transfer);
            };
            patchedPostMessage.toString =()=> {
                return String(Object.hasOwnProperty).replace('hasOwnProperty', 'postMessage');
            };
            window.postMessage = patchedPostMessage;
        };
        return '(' + String(patchPostMessageFunction) + ')();';
    }
    renderLoadingView(){
        if(this.state.defWebViewHeight == 0){
            return (
                <View style={
  { alignItems:"center"}}>
                    <ActivityIndicator
                        animating={
  true}
                        style={
  {
  height: 80,width:80, }}
                        size="large"
                    />