基础篇章:关于 React Native 之 WebView 的讲解

今天讲解的这个组件真的是很基础,不用多说,相信大家关于这个控件,一看就会。当然实践才是检验自己最好的方法。

大家好,我就是很多人喜欢用,而且常用的组件:WebView ,我就是WebView ,WebView 就是我。我的功能就是一句:在本地视图中呈现web内容。给我一个链接,我还你一堆内容。非常的神奇吧,这就像,牛吃进去的是草,拉出来的是……不对,哈哈,开个玩笑。和我玩其实很简单,了解我的性格特点,再给我一个吃的,我就能给你玩出你想要的花样。

我的属性

  • automaticallyAdjustContentInsets bool 设置是否自动调整内嵌插页内容
  • contentInset 设置网页内嵌内容大小,距离上下左右边距
  • injectedJavaScript string 设置在网页加载之前注入的一段JS代码
  • mediaPlaybackRequiresUserAction bool 设置页面中的HTML5音视频是否需要在用户点击后再开始播放。默认值为false
  • onError function 网页加载失败时调用
  • onLoad function 网页加载成功时调用
  • onLoadEnd function 网页加载结束时(无论成功或失败)调用
  • onLoadStart function 网页加载开始时调用
  • onNavigationStateChange function 当导航状态发生变化时回调
  • renderError function 渲染视图错误时使用
  • renderLoading function 该函数功能是返回一个加载指示器
  • scalesPageToFit bool 设置是否要把网页缩放到适应视图的大小,和改变缩放比例
  • source {uri: string, method: string, headers: object, body: string}, {html: string, baseUrl: string}, number 存放加载静态html或者url等
  • startInLoadingState bool 强制webview在第一次加载时是否显示加载视图
  • domStorageEnabled bool android 控制dom存储是否启用
  • javaScriptEnabled bool android 是否启用支持js
  • userAgent string android 设置userAgent
  • allowsInlineMediaPlayback bool ios 指定HTML5视频是在网页当前位置播放还是使用原生的全屏播放器播放,默认值为false。
  • bounces bool ios 设置当它到达内容的边缘web视图是否反弹。默认值是true。
  • dataDetectorTypes DataDetectorTypes, [object Object] ios 确实可点击的url类型
  • decelerationRate ScrollView.propTypes.decelerationRate ios 滚动滑动速率
  • onShouldStartLoadWithRequest function ios
  • scrollEnabled bool ios 是否滚动

看看,我的性格还是很多变的吧,这么多,其实用起来都是很简单的,不信看实例。

我的娇羞展示

效果图

实例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
WebView
} from 'react-native';
WEBVIEW_REF = 'webview';
export default class WebViewDemo extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.title_view}>
<TouchableOpacity
onPress={this.goBack.bind(this)}
>
<Text style={styles.title_text}>
返回
</Text>
</TouchableOpacity>
<Text style={styles.title_text}>
非著名程序员
</Text>
<TouchableOpacity
onPress={this.goForward.bind(this)}
>
<Text style={styles.title_text}>
前进
</Text>
</TouchableOpacity>
</View>
<WebView
ref={WEBVIEW_REF}
source={{uri: 'http://godcoder.me/'}}
startInLoadingState={true}
domStorageEnabled={true}
javaScriptEnabled={true}
automaticallyAdjustContentInsets={true}
/>
</View>
);
}
goBack(){
this.refs[WEBVIEW_REF].goBack();
}
goForward(){
this.refs[WEBVIEW_REF].goForward();
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
title_view:{
flexDirection:'row',
height:50,
paddingLeft:15,
paddingRight:15,
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor:'#27b5ee',
},
title_text:{
color:'white',
fontSize:22,
textAlign:'center'
},
});
AppRegistry.registerComponent('WebViewDemo', () => WebViewDemo);

是不是很简单,对就是这么简单,赶紧行动起来学习吧。好记性不如敲代码。

loonggg wechat
欢迎您扫一扫上面的二维码,订阅我的微信公众号「 非著名程序员」!
坚持原创技术分享,您的支持将鼓励我继续创作!