
创建一个原生的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代码
最近有个妹子弄的一个关于扩大眼界跟内含的订阅号,每天都会更新一些深度内容,在这里如果你感兴趣也可以关注一下(嘿对美女跟知识感兴趣),当然可以关注后输入:github 会有我的微信号,如果有问题你也可以在那找到我;当然不感兴趣无视此信息;