Home > Developer > Web Develop
Create a native WebView that can be used to access a Web page. You can load a URL or load a piece of HTML code;
One: Properties
1:iosallowsinlinemediaplayback BOOL
Specifies whether the HTML5 video is played in the current location of the Web page or using a native full-screen player. The default value is False.
Note: To make a video play in a Web page, not only to set this property to the video element in true,html itself but also to include the Webkit-playsinline attribute.
2:automaticallyadjustcontentinsets BOOL
3: (iOS) bounces bool
Contentinset {top:number, Left:number, Bottom:number, Right:number}
4: (iOS) Decelerationrate ScrollView.propTypes.decelerationRate
Specifies a floating-point number that sets how fast the view should stop scrolling after the user stops touching. You can also specify preset string values, such as "normal" and "fast", respectively, corresponding to Uiscrollviewdecelerationratenormal and Uiscrollviewdecelerationratefast.
Normal (regular speed): 0.998
Fast (faster): 0.9 (default value for IOS webview)
5: (Android) domstorageenabled bool
Android platform only. Specifies whether to turn on DOM local storage.
6:html string has expired
Please use the Source property instead.
7:injectedjavascript string
Set the JS code injected before the page is loaded.
8:mediaplaybackrequiresuseraction BOOL
Sets whether the HTML5 audio and video in the page needs to start playing after the user clicks. The default value is False.
9:onerror function
Called when the load fails.
10:onload function
Called when the load succeeds.
11:onloadend function
Called at the end of the load, regardless of success or failure.
12:onloadstart function
Called when the load starts.
: (Android) javascriptenabled bool
Android platform only. iOS platform JavaScript is turned on by default.
14:onnavigationstatechange function
: (iOS) Onshouldstartloadwithrequest function
Allows a custom handler function to be run for WebView initiated requests. Returns TRUE or false to indicate whether the request to continue executing the response.
16:rendererror function
Sets a function that returns a view for displaying errors.
17:renderloading function
Sets a function that returns a load indicator.
18:source {uri:string, method:string, Headers:object, body:string}, {html:string, baseurl:string}, number
Load a static HTML code or a URL in WebView (you can also include some header options).
19:scalespagetofit BOOL
Sets whether to scale the page to fit the view, and whether to allow the user to change the zoom scale.
: (iOS) scrollenabled bool
21:startinloadingstate BOOL
22:style View#style
23:url string
Has expired
Please use the Source property instead.
: (Android) useragent string #
Sets the User-agent string identifier for WebView. This string can also be set at the native end with Webviewconfig, but the JS-side setting overrides the native-side settings.
Two: Example code:
import React, {Component} from ' React '; import {appregistry, StyleSheet, Text, View, TextInput, Alert, Toucha Blehighlight, Touchableopacity, WebView} from ' react-native '; const HTML = '<!DOCTYPE HTML>\ n<HTML> <Head> <title>Hello Static World</title> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"> <Metaname= "Viewport"content= "width=320, User-scalable=no"> <styletype= "Text/css">Body{margin:0;padding:0;Font:62.5% Arial, Sans-serif;background:#ccc; }H1{padding:45px;margin:0;text-align:Center;Color:#33f; } </style> </Head> <Body> <H1>Hello Static World</H1> </Body></HTML>'; const url= ' http://www.cocoachina.com/';//navigation bar class Reactnativeproject extends Component {render () {return ( <WebViewstyle={styles.container}Source={{uri:URL}} OnLoad={()=>alert (' Load succeeded ')}/>); }}const styles = stylesheet.create ({container: {flex:1, margintop:64}, item: {fontsize:18, marginleft : 5, Color: ' #434343 '}}); Appregistry.registercomponent (' Reactnativeproject ', () = Reactnativeproject);
：
Three: Knowledge points:
1: Other Loading methods:
< webview style ={{ backgroundcolor:bgwash, Height:100,}} source ={{ uri: ' http://www.posttestserver.com/post.php ', Method: ' Post ', Body: ' foo }} scalespagetofit ={false} /> < webview style ={{ backgroundcolor:bgwash, Height:100,}} source ={require ('./helloworld.html ')} scalespagetofit ={true} /> < WebView style ={{ backgroundcolor:bgwash, height:100, }} sourceHTML}} Scalespagetofit ={true} /> where HTML is an HTML literal constant; it's an HTML code.React Native Knowledge 8-webview component
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
