-
Notifications
You must be signed in to change notification settings - Fork 692
/
CarouselScreen.js
113 lines (102 loc) · 3.18 KB
/
CarouselScreen.js
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
import React, {Component} from 'react';
import {StyleSheet} from 'react-native';
import {Constants, View, Text, Carousel, Image, Card} from 'react-native-ui-lib'; // eslint-disable-line
import _ from 'lodash';
const INITIAL_PAGE = 2;
const WIDTH = Constants.screenWidth - 120;
const IMAGES = [
'https://images.pexels.com/photos/1212487/pexels-photo-1212487.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
'https://images.pexels.com/photos/1366630/pexels-photo-1366630.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
'https://images.pexels.com/photos/1477459/pexels-photo-1477459.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
'https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'
];
class CarouselScreen extends Component {
state = {
currentPage: INITIAL_PAGE
};
onChangePage(index) {
this.setState({currentPage: index});
}
onPagePress = index => {
this.carousel.goToPage(index, true);
};
render() {
return (
<View flex>
<Text text30 margin-20>
Carousel
</Text>
<Carousel
migrate
ref={r => (this.carousel = r)}
// loop
onChangePage={index => this.onChangePage(index)}
pageWidth={WIDTH}
// itemSpacings={20}
initialPage={INITIAL_PAGE}
containerStyle={{height: 160/* , flex: 1 */}}
pageControlPosition={'under'}
pageControlProps={{onPagePress: this.onPagePress}}
// showCounter
>
<Page bg-red50>
<Text margin-15>PAGE 0</Text>
</Page>
<Page bg-yellow20>
<Text margin-15>PAGE 1</Text>
</Page>
<Page bg-purple50>
<Text margin-15>PAGE 2</Text>
</Page>
<Page bg-green50>
<Text margin-15>PAGE 3</Text>
</Page>
<Page bg-cyan50>
<Text margin-15>PAGE 4</Text>
</Page>
<Page bg-purple20>
<Text margin-15>PAGE 5</Text>
</Page>
<Page bg-blue60>
<Text margin-15>PAGE 6</Text>
</Page>
</Carousel>
<View margin-20 center /*style={{...StyleSheet.absoluteFillObject}} */ pointerEvents="none">
<Text text10>{this.state.currentPage}</Text>
</View>
<View padding-20>
<Carousel migrate containerStyle={{height: 160}} initialPage={INITIAL_PAGE} loop>
{_.map(IMAGES, (image, index) => {
return (
<View key={index} flex padding-10 bottom>
<Image
style={StyleSheet.absoluteFillObject}
source={{
uri: image
}}
/>
<Text white text50>Image {index}</Text>
</View>
);
})}
</Carousel>
</View>
</View>
);
}
}
const Page = ({children, ...others}) => {
return (
<View {...others} style={styles.page}>
{children}
</View>
);
};
const styles = StyleSheet.create({
page: {
flex: 1,
borderWidth: 1,
borderRadius: 4
}
});
export default CarouselScreen;