React Native中的组件ScrollView类似于iOS中的UIScrollView,其基本的使用方法和熟悉如下：
|
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
|
/**
* Sample React Native App
* https://github.com/facebook/react-native
* 周少停 ScrollView 的常用属性
* 2016-09-19
*/
import
React, { Component } from
'react'
;
import
{
AppRegistry,
StyleSheet,
Text,
ScrollView,
AlertIOS,
View
} from
'react-native'
;
var
Dimensions = require(
'Dimensions'
);
var
{width,height} = Dimensions.get(
'window'
);
class
Project
extends
Component {
render() {
return
(
<View style={styles.container}>
<ScrollView
horizontal={
true
}
//排列方向:横向 默认false纵向
showsHorizontalScrollIndicator={
false
}
//隐藏水平线
pagingEnabled={
true
}
//分页滑动 iOS
// scrollEnabled={false} //是否滚动 iOS
bounces={
false
}
//关闭弹簧效果 iOS
onScrollBeginDrag={()=>
this
.beginDrag()}
//开始滑动时调用
onScrollEndDrag={()=>
this
.endDrag()}
//结束滑动时调用
onMomentumScrollEnd={()=>
this
.momentumScroll()}
//当一帧滑动完毕后调用
>
{
this
.renderChildView()}
</ScrollView>
</View>
);
}
renderChildView(){
//数组
var
allChild = [];
var
colors = [
'red'
,
'blue'
,
'yellow'
,
'cyan'
,
'purple'
];
//遍历
for
(
var
i=0; i<5;i++){
allChild.push(
//装载
<View key={i} style={{backgroundColor:colors[i],width:width,height:120}}>
<Text>{i}</Text>
</View>
);
}
//返回
return
allChild;
}
beginDrag(){
// AlertIOS.alert('开始滑动');
}
endDrag(){
// AlertIOS.alert('滑动结束');
}
momentumScroll(){
// AlertIOS.alert('一帧结束')
}
}
const styles = StyleSheet.create({
});
AppRegistry.registerComponent(
'Project'
, () => Project);
|
demo：
|
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
|
/**
* Sample React Native App
* https://github.com/facebook/react-native
* 周少停 ScrollView demo
* 2016-09-20
*/
//首先导入计时器类库:
//终端: cd 项目根目录
// npm i react-timer-mixin --save
//noinspection JSUnresolvedVariable
import
React, { Component } from
'react'
;
import
{
AppRegistry,
StyleSheet,
Text,
ScrollView,
Image,
View
} from
'react-native'
;
//引入计时器类库
var
TimerMixin = require(
'react-timer-mixin'
);
//引入json数据
var
ImageData = require(
'./imageTitleJson.json'
);
//引入Dimensions
var
Dimensions = require(
'Dimensions'
);
var
width = Dimensions.get(
'window'
).width;
var
Project = React.createClass({
mixins: [TimerMixin],
//注册计时器
//设置固定值
getDefaultProps(){
return
{
//时间间隔
duration : 2000
}
},
//设置page的初始值和可变值
//默认第一页选中
getInitialState(){
return
{
//当前页码
currentPage : 0
};
},
render() {
return
(
<View style={styles.container}>
<ScrollView ref=
"scrollView"
style={styles.scrollViewStyle}
horizontal={
true
}
//水平排列
pagingEnabled={
true
}
//分页滑动
onMomentumScrollEnd={(e)=>
this
.onAnimationEnd(e)}
//一帧结束回调,去除()表示把该组件作为参数传过去
onScrollBeginDrag={
this
.BeginDrag}
//开始拖拽就停止定时器
onScrollEndDrag={
this
.EndDrag}
//停止拖拽就启动定时器
>
{
this
.readerAllImage()}
</ScrollView>
{
/*返回六点*/
}
<View style={styles.pageViewStyle}>
{
this
.renderPage()}
</View>
</View>
);
},
BeginDrag(){
//停止定时器
this
.clearInterval(
this
.timer);
},
EndDrag(){
//开启定时器
this
.startTimer();
},
//实现一些复杂操作
componentDidMount(){
//开启定时器
this
.startTimer();
},
//实现定时器
startTimer(){
//得到scrollView
var
scrollView =
this
.refs.scrollView;
var
imgsArr = ImageData.data;
//添加定时器
this
.timer =
this
.setInterval(
function
() {
//设置圆点
var
activePage = 0;
//判断
if
((
this
.state.currentPage+1) >= imgsArr.length){
//越界
activePage = 0;
}
else
{
activePage =
this
.state.currentPage + 1;
}
//更新状态机
this
.setState({
currentPage:activePage
});
//让scorllView动起来
var
offsetX = activePage * width;
scrollView.scrollResponderScrollTo({x:offsetX,y:0,animation:
true
});
},
this
.props.duration);
},
//返回图片
readerAllImage(){
//数组
var
allImage = [];
//拿到图片数组
var
imgsArr = ImageData.data;
//遍历
for
(
var
i=0; i<imgsArr.length;i++){
//去除单独的image
var
imgItem = imgsArr[i];
//创建组件装入数组
allImage.push(
<Image key={i} source={{uri:imgItem.img}} style={{width:width,height:120}}/>
);
}
//返回数组
return
allImage;
},
//返回圆点
renderPage(){
//定义一个数组放置所有圆点
var
indicatorArr = [];
//拿到图片数组
var
imgsArr = ImageData.data;
//圆点颜色style
var
style;
//遍历
for
(
var
i = 0;i<imgsArr.length;i++){
//判断
style = (i==
this
.state.currentPage) ? {color:
'red'
} : {color:
'white'
}
//装载进数组中
indicatorArr.push(
<Text key={i} style={[{fontSize:25},style]}>•</Text>
);
}
return
indicatorArr;
},
//当一帧结束时,调用
onAnimationEnd(e){
//求出水平方向的偏移量
var
offSetX = e.nativeEvent.contentOffset.x;
//求出当前的page
var
currentPage = Math.floor(offSetX/width);
//更新状态机,修改绘制UI
this
.setState({
currentPage : currentPage
});
}
});
const styles = StyleSheet.create({
container:{
marginTop:20
},
scrollViewStyle:{
},
pageViewStyle: {
width:width,
height:25,
backgroundColor:
'rgba(0,0,0,0)'
,
position:
'absolute'
,
//绝对定位
bottom:0,
bottom:0,
flexDirection:
'row'
,
//主轴方向
alignItems:
'center'
}
});
AppRegistry.registerComponent(
'Project'
, () => Project);
|
涉及到json:
|
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
|
{
"data"
:[
{
"img"
:
"img_01"
,
"title"
:
"叔叔,我们不约"
},
{
"img"
:
"img_02"
,
"title"
:
"看好,我要变形了"
},
{
"img"
:
"img_03"
,
"title"
:
"奇变偶不变,符号看象限"
},
{
"img"
:
"img_04"
,
"title"
:
"其实,我是你老爹"
},
{
"img"
:
"img_05"
,
"title"
:
"伯母.您好,我是您儿子的男朋友"
},
{
"img"
:
"img_06"
,
"title"
:
"该吃药了"
}
]
}
|
React Native 中StatusBar的相关属性，其他一些属性只限于安卓，一些属性只限于iOS，具体看React Native中文网
|
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
|
/**
* Sample React Native App
* https://github.com/facebook/react-native
* 周少停 2016-09-27
* StatusBar状态栏
*
**/
import
React, { Component } from
'react'
;
import
{
AppRegistry,
StyleSheet,
Text,
View,
StatusBar,
} from
'react-native'
;
class
Project
extends
Component{
render() {
return
(
<View style={styles.container}>
<StatusBar
// hidden = {true} //status显示与隐藏
// backgroundColor = 'red' //status栏背景色,仅支持安卓
// translucent = {true} //设置status栏是否透明效果,仅支持安卓
// barStyle = 'light-content' //设置状态栏文字效果,仅支持iOS,枚举类型:default黑light-content白
networkActivityIndicatorVisible = {
true
}
//设置状态栏上面的网络进度菊花,仅支持iOS
showHideTransition =
'slide'
//显隐时的动画效果.默认fade
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent:
'center'
,
alignItems:
'center'
,
backgroundColor:
'#F5FCFF'
,
}
});
AppRegistry.registerComponent(
'Project'
, () => Project);
|
React NAtive中的TabBarIos也就是iOS中的UITabBarController，这里的TabBarIos仅可以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
86
87
88
89
90
91
|
/**
* Sample React Native App
* https://github.com/facebook/react-native
* 周少停 TabBarIos TabBarIos.Item
* 2016-09-22
*/
import
React, { Component } from
'react'
;
import
{
AppRegistry,
StyleSheet,
Text,
TabBarIOS,
View
} from
'react-native'
;
var
Project = React.createClass({
//设置初始值
getInitialState(){
return
{
//默认选中第一个Item
selectedTabBarItem:
'home'
}
},
render() {
return
(
<View style={styles.container}>
<TabBarIOS barTintColor=
'black'
>
<TabBarIOS.Item
systemIcon=
"bookmarks"
badge=
"3"
selected = {
this
.state.selectedTabBarItem ==
'home'
}
onPress = {()=>{
this
.setState({selectedTabBarItem:
'home'
})}}
>
<View style={[styles.commonViewStyle,{backgroundColor:
'red'
}]}>
<Text>首页</Text>
</View>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon=
"more"
selected = {
this
.state.selectedTabBarItem ==
'second'
}
onPress = {()=>{
this
.setState({selectedTabBarItem:
'second'
})}}
>
<View style={[styles.commonViewStyle,{backgroundColor:
'yellow'
}]}>
<Text>第二页</Text>
</View>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon=
"downloads"
selected = {
this
.state.selectedTabBarItem ==
'three'
}
onPress = {()=>{
this
.setState({selectedTabBarItem:
'three'
})}}
>
<View style={[styles.commonViewStyle,{backgroundColor:
'cyan'
}]}>
<Text>第三页</Text>
</View>
</TabBarIOS.Item>
<TabBarIOS.Item
// systemIcon="contacts"
icon = {require(
'./1.png'
)}
badge=
"6"
selected = {
this
.state.selectedTabBarItem ==
'four'
}
onPress = {()=>{
this
.setState({selectedTabBarItem:
'four'
})}}
>
<View style={[styles.commonViewStyle,{backgroundColor:
'blue'
}]}>
<Text>第四页</Text>
</View>
</TabBarIOS.Item>
</TabBarIOS>
</View>
);
}
});
const styles = StyleSheet.create({
container:{
flex:1,
backgroundColor:
'#f5fcff'
,
},
commonViewStyle:{
flex:1,
justifyContent:
'center'
,
alignItems:
'center'
}
});
AppRegistry.registerComponent(
'Project'
, () => Project);
|
完整源码下载：https://github.com/pheromone/React-Native-1
7272
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
