標籤：
建立一個原生的WebView，可以用於訪問一個網頁。可以載入一個URL也可以載入一段html代碼；
一：屬性
1：iosallowsInlineMediaPlayback bool
指定HTML5視頻是在網頁當前位置播放還是使用原生的全屏播放器播放。 預設值為false。
注意 : 要讓視頻在網頁中播放，不光要將這個屬性設為true，HTML中的視頻元素本身也需要包含webkit-playsinline屬性。
2：automaticallyAdjustContentInsets bool
3：（ios）bounces bool
contentInset {top: number, left: number, bottom: number, right: number}
4：（ios）decelerationRate ScrollView.propTypes.decelerationRate
指定一個浮點數，用於設定在使用者停止觸摸之後，此視圖應以多快的速度停止滾動。也可以指定預設的字串值，如"normal"和"fast"，分別對應UIScrollViewDecelerationRateNormal 和UIScrollViewDecelerationRateFast。
Normal（正常速度）: 0.998
Fast（較快速度）: 0.9 (iOS WebView的預設值)
5：（android）domStorageEnabled bool
僅限Android平台。指定是否開啟DOM本機存放區。
6：html string 已到期
請使用source 屬性代替。
7：injectedJavaScript string
設定在網頁載入之前注入的一段JS代碼。
8：mediaPlaybackRequiresUserAction bool
設定頁面中的HTML5音視頻是否需要在使用者點擊後再開始播放。預設值為false.
9：onError function
載入失敗時調用。
10：onLoad function
載入成功時調用。
11：onLoadEnd function
載入結束時（無論成功或失敗）調用。
12：onLoadStart function
載入開始時調用。
13：（android）javaScriptEnabled bool
僅限Android平台。iOS平台JavaScript是預設開啟的。
14：onNavigationStateChange function
15：（ios）onShouldStartLoadWithRequest function
允許為webview發起的請求運行一個自訂的處理函數。返回true或false表示是否要繼續執行響應的請求。
16：renderError function
設定一個函數，返回一個視圖用於顯示錯誤。
17：renderLoading function
設定一個函數，返回一個載入指標。
18：source {uri: string, method: string, headers: object, body: string}, {html: string, baseUrl: string}, number
在WebView中載入一段靜態html代碼或是一個url（還可以附帶一些header選項）。
19：scalesPageToFit bool
設定是否要把網頁縮放到適應視圖的大小，以及是否允許使用者改變縮放比例。
20：（ios）scrollEnabled bool
21：startInLoadingState bool
22：style View#style
23：url string
已到期
請使用source 屬性代替。
24：（android）userAgent string #
為WebView設定user-agent字串標識。這一字串也可以在原生端用WebViewConfig來設定,但js端的設定會覆蓋原生端的設定。
二：執行個體代碼：
import React, { Component } from ‘react‘;import { AppRegistry, StyleSheet, Text, View, TextInput, Alert, TouchableHighlight, TouchableOpacity, WebView} from ‘react-native‘;const HTML = `<!DOCTYPE html>\n<html> <head> <title>Hello Static World</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=320, user-scalable=no"> <style type="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/‘;//導覽列class ReactNativeProject extends Component { render() { return ( <WebView style={styles.container} source={{uri: url}} onLoad={()=>alert(‘載入成功‘)}/> ); }}const styles = StyleSheet.create({ container: { flex: 1, marginTop:64 }, item: { fontSize:18, marginLeft:5, color:‘#434343‘ }});AppRegistry.registerComponent(‘ReactNativeProject‘, () => ReactNativeProject);
：
三：知識點：
1：其它載入方式：
<WebView style={{ backgroundColor: BGWASH, height: 100, }} source={{ uri: ‘http://www.posttestserver.com/post.php‘, method: ‘POST‘, body: ‘foo=bar&bar=foo‘ }} scalesPageToFit={false} />
<WebView style={{ backgroundColor: BGWASH, height: 100, }} source={require(‘./helloworld.html‘)} scalesPageToFit={true} />
<WebView style={{ backgroundColor: BGWASH, height: 100, }} source={{html: HTML}} scalesPageToFit={true} />其中HTML是html文本常量；是一段html代碼
React Native知識8-WebView組件
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
