Solution: scrollview nested webView compatibility problem, and webView display html exception problem
When I first came into contact with React Native, the webView was always not displayed when the scrollview was nested in the webView. I found a lot of information and did not solve the problem. This method was used to solve the problem.
//define a variable on the class
let thisWebView = null;
//constructor
builder (s) {
super(e); this.state={
defWebViewHeight:0,
thread:{
contentText:"<p>Steps to adjust member points or balance:</p>"
}
} }
// related methods
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: ''}}/>
)
}
Quote:
<ScrollView style={styles.background}>
{this.renderAutoHeightWebView()}
...............................
</ScrollView>
The content is reproduced from: https://www.aliyun.com/jiaocheng/632931.html