Showing
1 changed file
with
75 additions
and
9 deletions
1 | import React from 'react'; | 1 | import React from 'react'; |
2 | -import { View,Text, StyleSheet } from 'react-native'; | 2 | +import { View,Text, StyleSheet, Button } from 'react-native'; |
3 | import Icon from 'react-native-vector-icons/FontAwesome'; | 3 | import Icon from 'react-native-vector-icons/FontAwesome'; |
4 | +import Swiper from 'react-native-swiper'; | ||
4 | 5 | ||
5 | export default PromptSearch = () => { | 6 | export default PromptSearch = () => { |
6 | 7 | ||
7 | return( | 8 | return( |
8 | - <View style={styles.container} > | 9 | + <Swiper style={styles.wrapper} showsButtons={true} loop={false}> |
9 | - <Icon name='search' style={styles.icon} size={50} /> | 10 | + <FirstSlide /> |
10 | - <Text style={styles.text}>당신이 궁금해하는</Text> | 11 | + <SecondSlide /> |
11 | - <Text style={styles.text}>질문을 검색하세요</Text> | 12 | + <ThirdSlide /> |
12 | - <Text style={styles.subtext}>길잡이가 당신의</Text> | 13 | + <LastSlide /> |
13 | - <Text style={styles.subtext}>질문을 이해할거에요</Text> | 14 | + </Swiper> |
14 | - </View> | 15 | + |
15 | ) | 16 | ) |
16 | } | 17 | } |
17 | 18 | ||
19 | +const FirstSlide = () => { | ||
20 | + <View style={styles.slide1} > | ||
21 | + <Icon name='search' style={styles.icon} size={50} /> | ||
22 | + <Text style={styles.text}>당신이 궁금해하는</Text> | ||
23 | + <Text style={styles.text}>질문을 검색하세요</Text> | ||
24 | + <Text style={styles.subtext}>길잡이가 당신의</Text> | ||
25 | + <Text style={styles.subtext}>질문을 이해할거에요</Text> | ||
26 | + </View> | ||
27 | +} | ||
28 | +const SecondSlide = () => { | ||
29 | + <View style={styles.slide2} > | ||
30 | + <Icon name='search' style={styles.icon} size={50} /> | ||
31 | + <Text style={styles.text}>길잡이가 수정한</Text> | ||
32 | + <Text style={styles.text}>검색 키워드를 확인하세요</Text> | ||
33 | + <Text style={styles.subtext}>길잡이는 항상 최적의</Text> | ||
34 | + <Text style={styles.subtext}>검색키위드를 제안합니다</Text> | ||
35 | + </View> | ||
36 | +} | ||
37 | +const ThirdSlide = () => { | ||
38 | + <View style={styles.slide3} > | ||
39 | + <Icon name='search' style={styles.icon} size={50} /> | ||
40 | + <Text style={styles.text}>검색 점수와 그래프로</Text> | ||
41 | + <Text style={styles.text}>검색능력을 체크하세요</Text> | ||
42 | + <Text style={styles.subtext}>길잡이는 당신의</Text> | ||
43 | + <Text style={styles.subtext}>검색능력 향상시킵니다</Text> | ||
44 | + </View> | ||
45 | +} | ||
46 | +const LastSlide = () => { | ||
47 | + <View style={styles.slide4} > | ||
48 | + <Icon name='search' style={styles.icon} size={50} /> | ||
49 | + <Text style={styles.text}>내 손 안의 검색 도우미</Text> | ||
50 | + <Text style={styles.text}>길잡이에서</Text> | ||
51 | + <Text style={styles.text}>검색을 시작하세요</Text> | ||
52 | + <Button | ||
53 | + title="지금 바로 시작!" | ||
54 | + onPress={() => Alert.alert('Simple Button pressed')} | ||
55 | + /> | ||
56 | + </View> | ||
57 | +} | ||
18 | 58 | ||
19 | const styles = StyleSheet.create({ | 59 | const styles = StyleSheet.create({ |
20 | container: { | 60 | container: { |
... | @@ -39,5 +79,31 @@ const styles = StyleSheet.create({ | ... | @@ -39,5 +79,31 @@ const styles = StyleSheet.create({ |
39 | fontSize: 20, | 79 | fontSize: 20, |
40 | fontWeight: 'bold', | 80 | fontWeight: 'bold', |
41 | color:'#999999', | 81 | color:'#999999', |
42 | - } | 82 | + }, |
83 | + wrapper: { | ||
84 | + }, | ||
85 | + slide1: { | ||
86 | + flex: 1, | ||
87 | + justifyContent: 'center', | ||
88 | + alignItems: 'center', | ||
89 | + backgroundColor: '#9DD6EB', | ||
90 | + }, | ||
91 | + slide2: { | ||
92 | + flex: 1, | ||
93 | + justifyContent: 'center', | ||
94 | + alignItems: 'center', | ||
95 | + backgroundColor: '#97CAE5', | ||
96 | + }, | ||
97 | + slide3: { | ||
98 | + flex: 1, | ||
99 | + justifyContent: 'center', | ||
100 | + alignItems: 'center', | ||
101 | + backgroundColor: '#92BBD9', | ||
102 | + }, | ||
103 | + slide4: { | ||
104 | + flex: 1, | ||
105 | + justifyContent: 'center', | ||
106 | + alignItems: 'center', | ||
107 | + backgroundColor: '#FFF', | ||
108 | + }, | ||
43 | }); | 109 | }); |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
-
Please register or login to post a comment