Home > Developer > Web Develop
I am also react native rookie, the following is just talk about the solution, specifically why can realize at present do not understand.
I put WebView in the scrollview because of the demand relationship in the project.
Method One:
At first I followed some methods on the Internet in JS code as follows:
1<ScrollView>2<WebView3ref={' WebView '}4Source={{html:data.html}}5style={{Height: This. State. Webviewheight}}6scrollenabled = {false}7onnavigationstatechange={(title) ={8 This. SetState ({9 webviewheight: (parseint (title.title))Ten }) One }} Aonmessage={(E) = { - This. Handlemessage (e) - }} the/> - ... -</ScrollView>
The code in data.html is as follows:
1<! DOCTYPE html>234<meta charset= "UTF-8" > <meta name= "viewport" content= "Width=device-width, initial-scale=1.0" >56<body>7 ...8</body>9<script>TenWindow.onload =function () { OneWindow.location.hash = 1; ADocument.title =Document.body.clientHeight; - } -</script> the</body> -But this way, when jumping from another page to the WebView page for the first time, the height of the webview is fine, but the second height is wrong.
Method Two:
Then I thought of another way, the code in JS is as follows:
1<ScrollView>2<WebView3ref={' WebView '}4Source={{html:data.html}}5style={{Height: This. State. Webviewheight}}6scrollenabled = {false}7onmessage={(E) = {8 This. Handlemessage (e)9 }}Tenonloadend={ This. webviewloaded} Onejavascriptenabled={true} A/> - ... -</ScrollView>Is that I do not use Onnavigationstatechange, but through onloadend to change the value of height, Onloadend calls the Webviewloaded function code is as follows:
1 webviewloaded = () = {2this . Refs.mywebview); 3 This . Refs.webview.injectJavaScript ('4 Const height = document.body.clientHeight; 5 Window.postmessage (json.stringify ({height:height})); 6 `); 7 }
The handlemessage that is called in the OnMessage listens for the height value, as follows:
1 handlemessage = (e) + = {2 const data = Json.parse (e.nativeevent.data); 3 if (data.height) {4This . SetState ({5 WebViewHeight:data.height6 }); 7 }8 }
This method in the debugging phase, is no problem, there is no large blank, loading is normal, but after packaging into an apk, the page webview load the correct height of the speed becomes extremely slow.
Programme III:
Finally, my solution for this is integrated programme 1 and programme 2:
As follows:
1<ScrollView>2<WebView3ref={' WebView '}4Source={{html:data.html}}5style={{Height: This. State. Webviewheight}}6scrollenabled = {false}7onmessage={(E) = {8 This. Handlemessage (e)9 }}Tenonnavigationstatechange={(title) ={ One This. SetState ({ A webviewheight:parseint (title.title) - }) - }} theonloadend={ This. webviewloaded} -javascriptenabled={true} -/> - ... +</ScrollView>This way, when packaged into an apk, the webview gets the correct height and the time is short, and the second entry will no longer have the problem of extra whitespace.
React native questions about the use of WebView in ScrollView
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
