React Native 原生RN嵌套webView，並自適應高度

封裝自適應高度的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"
                    />
                </View>
            )
        }
    }
    renderAutoHeightWebView(){
        return(
            <View style={{ height: this.state.defWebViewHeight,}}>
                <WebView
                    ref={webview => thisWebView = webview}
                    injectedJavaScript={this._getInjectedJavaScript()}
                    onLoadEnd={this._onLoadEnd}
                    onMessage={this._onMessage.bind(this)}
                    scrollEnabled={false}
                    {...this.props}
                />
            </View>
        )
    }
    render() {
        return (
            <ScrollView>
                {this.renderLoadingView()}
                {this.renderAutoHeightWebView()}
            </ScrollView>
        );
    }
}

使用場景

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Dimensions,
    Text
} from 'react-native';

const { width, height } = Dimensions.get('window');
import WebViewAutoHeight from './WebViewAutoheight'

const HTML = `  
<!DOCTYPEhtml>\n  
<html>  
  <head>  
    <title>HTML字符串</title>  
    <metahttp-equivmetahttp-equiv="content-type" content="text/html;charset=utf-8">  
    <meta name="viewport"content="width=320, user-scalable=no">  
    <style type="text/css">  
      body {  
        margin: 0;  
        padding: 0;  
        font: 40% arial, sans-serif;  
        background: #FFF;  
        padding: 10px;
      }  
    </style>  
  </head>  
  <body>  
    <p><br>紅纓子高粱，俗稱小紅梁，是赤水河流域特產的一種有機糯高粱。它是茅臺鎮醬香型白酒的關鍵釀酒原料。因不同於其他高粱，粒小、皮厚、堅實、飽滿，紅纓子高粱被形象稱爲“沙”。<br><br><br><img src="https://zn-image.oss-cn-shenzhen.aliyuncs.com/supplychain-dev/test/articleEdit/PhbM5hiSHF.jpg" style="max-width:100%;"><br>茅臺酒所代表的醬香酒，有三個獨特工藝特點，都與紅纓子高粱有關。<br><br><br>第一， 茅臺酒兩次投料，其他白酒一年四季都在投料，兩次投料即指紅纓子高粱，謂之“下沙”。<br><br>第二， 茅臺酒生產週期歷時一年，七次精釀，只有紅纓子高粱才能歷經九次蒸煮，謂之“回沙”。<br><br>第三，茅臺酒是整粒高粱參與發酵，約20%破碎率，此類傳統工藝的醬香酒，謂之“坤沙”（整粒之意）。<br><br>紅纓子高粱單寧含量約1.61%，總澱粉含量65%以上，支鏈澱粉含量佔總澱粉含量的88%~93%。<br><img src="https://zn-image.oss-cn-shenzhen.aliyuncs.com/supplychain-dev/test/articleEdit/PkAb7NiBfH.jpg" style="max-width:100%;"><br>紅纓子高粱支鏈澱粉含量高，其截面呈玻璃質地狀，十分有利於回沙工藝的多輪次翻烤，使茅臺鎮醬香型白酒每一輪的營養消耗有一合理範圍。支鏈澱粉(amylopection)又稱膠澱粉,分子相對較大,一般由幾千個葡萄糖殘基組成。支鏈澱粉加熱糊化後，分子中的鏈較爲鬆散，因此具有較高的粘度。<br><br>紅纓子高粱單寧含量適中（1.5%-2.0%），通過傳統醬香工藝發酵形成茅臺酒特有的芳香類風味物質。這些物質的形成與當地高粱原料及特殊的地域微生物羣系密切相關。也是茅臺酒幽雅細膩、回味悠長的重要因素。<br>至於爲何要兩次投料，季克良曾解釋說：是順應了自然條件設計出來的，因爲貴州是山區，山上的糧食要遲一點成熟，山下的糧食，河谷地帶的要早成熟，所以早成熟的部分我們先投下去，然後山上成熟了第二次投料。<br><img src="https://zn-image.oss-cn-shenzhen.aliyuncs.com/supplychain-dev/test/articleEdit/s42CrmRRfP.jpg" style="max-width:100%;"><br>紅纓子高粱有着獨特的“謙卑”氣質，相對其他高粱的“牛氣沖天”，它總是保持微微彎腰低頭，像儒家文化的謙謙君子。厚德載物，方爲君子，一瓶茅臺酒歷時一年生產、七次精釀、三年貯存、五年出廠。這五年的堅守，如果換算成工作時間，足足有一萬小時，這恰似人生的奮鬥歷程。茅臺酒見證了歷史的重要時刻，也見證着人生的重要時刻。茅臺酒伴隨着百年民族復興，茅臺酒也伴隨着人生的涅槃成長。<br><br>紅纓子高粱所帶來的獨特氣質，造就了茅臺酒的獨特氣質。當我們打開一瓶茅臺酒，如蘭花之香，香而不豔，幽雅細膩。茅臺酒決無添加，卻富含1000種香味香氣物質，是世界上香味香氣物質最爲豐富豐滿的酒品之一。聞香豐富、口感豐滿、回味悠長、留香持久，構成了茅臺酒獨特的產品</p> 
  </body>  
</html>  
`;


const html = '<p><br>紅纓子高粱，俗稱小紅梁，是赤水河流域特產的一種有機糯高粱。它是茅臺鎮醬香型白酒的關鍵釀酒原料。因不同於其他高粱，粒小、皮厚、堅實、飽滿，紅纓子高粱被形象稱爲“沙”。<br><br><br><img src="https://zn-image.oss-cn-shenzhen.aliyuncs.com/supplychain-dev/test/articleEdit/PhbM5hiSHF.jpg" style="max-width:100%;"><br>茅臺酒所代表的醬香酒，有三個獨特工藝特點，都與紅纓子高粱有關。<br><br><br>第一， 茅臺酒兩次投料，其他白酒一年四季都在投料，兩次投料即指紅纓子高粱，謂之“下沙”。<br><br>第二， 茅臺酒生產週期歷時一年，七次精釀，只有紅纓子高粱才能歷經九次蒸煮，謂之“回沙”。<br><br>第三，茅臺酒是整粒高粱參與發酵，約20%破碎率，此類傳統工藝的醬香酒，謂之“坤沙”（整粒之意）。<br><br>紅纓子高粱單寧含量約1.61%，總澱粉含量65%以上，支鏈澱粉含量佔總澱粉含量的88%~93%。<br><img src="https://zn-image.oss-cn-shenzhen.aliyuncs.com/supplychain-dev/test/articleEdit/PkAb7NiBfH.jpg" style="max-width:100%;"><br>紅纓子高粱支鏈澱粉含量高，其截面呈玻璃質地狀，十分有利於回沙工藝的多輪次翻烤，使茅臺鎮醬香型白酒每一輪的營養消耗有一合理範圍。支鏈澱粉(amylopection)又稱膠澱粉,分子相對較大,一般由幾千個葡萄糖殘基組成。支鏈澱粉加熱糊化後，分子中的鏈較爲鬆散，因此具有較高的粘度。<br><br>紅纓子高粱單寧含量適中（1.5%-2.0%），通過傳統醬香工藝發酵形成茅臺酒特有的芳香類風味物質。這些物質的形成與當地高粱原料及特殊的地域微生物羣系密切相關。也是茅臺酒幽雅細膩、回味悠長的重要因素。<br>至於爲何要兩次投料，季克良曾解釋說：是順應了自然條件設計出來的，因爲貴州是山區，山上的糧食要遲一點成熟，山下的糧食，河谷地帶的要早成熟，所以早成熟的部分我們先投下去，然後山上成熟了第二次投料。<br><img src="https://zn-image.oss-cn-shenzhen.aliyuncs.com/supplychain-dev/test/articleEdit/s42CrmRRfP.jpg" style="max-width:100%;"><br>紅纓子高粱有着獨特的“謙卑”氣質，相對其他高粱的“牛氣沖天”，它總是保持微微彎腰低頭，像儒家文化的謙謙君子。厚德載物，方爲君子，一瓶茅臺酒歷時一年生產、七次精釀、三年貯存、五年出廠。這五年的堅守，如果換算成工作時間，足足有一萬小時，這恰似人生的奮鬥歷程。茅臺酒見證了歷史的重要時刻，也見證着人生的重要時刻。茅臺酒伴隨着百年民族復興，茅臺酒也伴隨着人生的涅槃成長。<br><br>紅纓子高粱所帶來的獨特氣質，造就了茅臺酒的獨特氣質。當我們打開一瓶茅臺酒，如蘭花之香，香而不豔，幽雅細膩。茅臺酒決無添加，卻富含1000種香味香氣物質，是世界上香味香氣物質最爲豐富豐滿的酒品之一。聞香豐富、口感豐滿、回味悠長、留香持久，構成了茅臺酒獨特的產品</p>'

//模塊聲名並導出
export default class extends React.Component {

    //渲染
    render() {
        return (
            <View style={{flex:1}}>
                <View style={{height: 64, width:width, justifyContent:'center', alignItems:'center'}}>
                    <Text>測試webView適配高度</Text>

                </View>
                <WebViewAutoHeight style={{backgroundColor:'#FFF',flex:1}}
                    source={{html:html}} // 可以接受本地的HTML, 也可以單純接受網絡請求下來的html字符串,帶標籤,默認字體醜爆而已...
                    domStorageEnabled={true}
                    javaScriptEnabled={true}
                >
                </WebViewAutoHeight>
                <View style={{height: 49, width:width, justifyContent:'center', alignItems:'center'}}>
                    <Text>測試webView適配高度</Text>
                </View>
            </View>
        );
    }
};

效果展示：

React Native 原生RN嵌套webView，並自適應高度

React Native 自定義modal

React Native 單選，複選, 全選功能

React Native 原生RN嵌套webView，並自適應高度

React Native 廣告，驗證碼倒計時工具類

React Native 解決Text在iOS、android中更改字體變大，導致項目文字變大布局錯亂

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結