解决：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