React-Native 实现Android中的ViewPager

ViewPager在Android中的使用率也算是非常高的,React-Native也提供了类似Android的ViewPager组件,ViewPagerAndroid , 使用 ViewPagerAndroid可以轻松实现Android中的ViewPager.
ViewPager

使用 uiautomatorviewer 来查看一下布局,确实也就是Android原生的 ViewPager.
ViewPager

声明ViewPagerAndroid

1
2
3
var {
ViewPagerAndroid,
} = React;

声明之后就可以使用了.在render 函数中返回 <ViewPagerAndroid></ViewPagerAndroid>

把ViewPagerAndroid添加到界面

1
2
3
4
5
6
7
8
<ViewPagerAndroid
style={styles.viewPager}
initialPage={0}
onPageScroll={this.onPageScroll}
onPageSelected={this.onPageSelected}
ref={viewPager => { this.viewPager = viewPager; }}>
{pages}
</ViewPagerAndroid>

给ViewPagerAndroid添加内容
ViewPagerAndroid 的内容是 {pages}, pages是一个数组,里面是一组子view, 通过push方法添加view

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var pages = [];
for (var i = 0; i < PAGES; i++) {
var pageStyle = {
backgroundColor: BGCOLOR[i % BGCOLOR.length],
flex: 1,
alignItems: 'stretch'
};
pages.push(
<View key={i} style={pageStyle} collapsable={false}>
<Image
style={styles.image}
source={{uri: IMAGE_URIS[i % BGCOLOR.length]}}
/>
</View>
);
}

代码:

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
'use strict'
var React = require('react-native')
var {
Image,
StyleSheet,
Text,
TouchableWithoutFeedback,
TouchableOpacity,
View,
ViewPagerAndroid,
BackAndroid,
} = React;
var PAGES = 5;
var BGCOLOR = ['#fdc08e', '#fff6b9', '#99d1b7', '#dde5fe', '#f79273'];
var IMAGE_URIS = [
'https://apod.nasa.gov/apod/image/1410/20141008tleBaldridge001h990.jpg',
'https://apod.nasa.gov/apod/image/1409/volcanicpillar_vetter_960.jpg',
'https://apod.nasa.gov/apod/image/1409/m27_snyder_960.jpg',
'https://apod.nasa.gov/apod/image/1409/PupAmulti_rot0.jpg',
'https://apod.nasa.gov/apod/image/1510/lunareclipse_27Sep_beletskycrop4.jpg',
];
BackAndroid.addEventListener('hardwareBackPress', function() {
if(_navigator == null){
return false;
}
if(_navigator.getCurrentRoutes().length === 1){
return false;
}
_navigator.pop();
return true;
});
var _navigator ;
var ViewPager = React.createClass({
getInitialState: function(){
_navigator = this.props.navigator;
return {
page: 0,
animationsAreEnabled: true,
progress: {
position: 0,
offset: 0,
},
};
},
onPageSelected: function(e) {
this.setState({page: e.nativeEvent.position});
},
onPageScroll: function(e) {
this.setState({progress: e.nativeEvent});
},
move: function(delta) {
var page = this.state.page + delta;
this.go(page);
},
go: function(page) {
if (this.state.animationsAreEnabled) {
this.viewPager.setPage(page);
} else {
this.viewPager.setPageWithoutAnimation(page);
}
this.setState({page});
},
render: function(){
var pages = [];
for (var i = 0; i < PAGES; i++) {
var pageStyle = {
backgroundColor: BGCOLOR[i % BGCOLOR.length],
flex: 1,
alignItems: 'stretch'
};
pages.push(
<View key={i} style={pageStyle} collapsable={false}>
<Image
style={styles.image}
source={{uri: IMAGE_URIS[i % BGCOLOR.length]}}
/>
</View>
);
}
var { page, animationsAreEnabled } = this.state;
return (
<View style={styles.container}>
<ViewPagerAndroid
style={styles.viewPager}
initialPage={0}
onPageScroll={this.onPageScroll}
onPageSelected={this.onPageSelected}
ref={viewPager => { this.viewPager = viewPager; }}>
{pages}
</ViewPagerAndroid>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
imageContainer: {
flex: 1,
alignItems: 'stretch'
},
image: {
flex: 1,
},
viewPager: {
flex: 1,
},
});
module.exports = ViewPager;

github地址

文章来自: https://hanks.xyz