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