-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathswiper.js
38 lines (35 loc) · 979 Bytes
/
swiper.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
import React, { Component } from "react";
import { StyleSheet, Text, View, ScrollView, Dimensions } from "react-native";
const width = Dimensions.get("window").width;
export default class Swiper extends Component {
render() {
return (
<View style={styles.container}>
<ScrollView horizontal pagingEnabled>
<View style={[styles.page, { backgroundColor: "#779ecb" }]}>
<Text>Page 1</Text>
</View>
<View style={[styles.page, { backgroundColor: "#c8cb77" }]}>
<Text>Page 2</Text>
</View>
<View style={[styles.page, { backgroundColor: "#cb7a77" }]}>
<Text>Page 3</Text>
</View>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
page: {
width,
alignItems: "center",
justifyContent: "center",
},
});