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

解决：scrollview 嵌套webView 兼容问题,及webView显示html异常问题

 刚接触React Native，scrollview 嵌套webView时webView 总是不显示，找了很多资料没有解决，用了这个方法解决了问题。

//在类上定义一个变量

let thisWebView = null;

//构造器

constructor(e){

    super(e); this.state={

        defWebViewHeight:0,

        thread:{

        contentText:"<p>调整会员积分或余额步骤：</p>"

        }

    }

}

//相关方法

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});

}

_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) + ')();';

}

renderAutoHeightWebView() {

return (<WebView style={{height: this.state.defWebViewHeight,}}

ref={WebView => thisWebView = WebView}

injectedJavaScript={this._getInjectedJavaScript()}

onLoadEnd={this._onLoadEnd}

onMessage={this._onMessage.bind(this)}

scrollEnabled={false} {...this.props}

source={{html:

"<meta name=\"viewport\" content=\"width=device-width,charset=utf-8, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no\" />" +

"<style>body{font-size: 14px;color:#333;line-height: 1.5;}img{max-width: 100%;}</style>" +

this.state.thread.contentText, baseUrl: ''}}/>

)

}

引用：

<ScrollView style={styles.background}>

    {this.renderAutoHeightWebView()}

    ...............................

</ScrollView>

内容转载自：https://www.aliyun.com/jiaocheng/632931.html