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
|
'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;
|
