Merge branch 'promptsearch' into 'master'
Search Guider start manual main.js에서 <PromptSearch /> 추가해서 test 추가하고 싶은것 1. 버튼을 누르면 사라지게하기 2. 앱을 처음 열었을 때만 나타나고 그 이후에는 나타나지 않기 See merge request !1
Showing
1 changed file
with
71 additions
and
5 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}> |
10 | + <FirstSlide /> | ||
11 | + <SecondSlide /> | ||
12 | + <ThirdSlide /> | ||
13 | + <LastSlide /> | ||
14 | + </Swiper> | ||
15 | + | ||
16 | + ) | ||
17 | +} | ||
18 | + | ||
19 | +const FirstSlide = () => { | ||
20 | + <View style={styles.slide1} > | ||
9 | <Icon name='search' style={styles.icon} size={50} /> | 21 | <Icon name='search' style={styles.icon} size={50} /> |
10 | <Text style={styles.text}>당신이 궁금해하는</Text> | 22 | <Text style={styles.text}>당신이 궁금해하는</Text> |
11 | <Text style={styles.text}>질문을 검색하세요</Text> | 23 | <Text style={styles.text}>질문을 검색하세요</Text> |
12 | <Text style={styles.subtext}>길잡이가 당신의</Text> | 24 | <Text style={styles.subtext}>길잡이가 당신의</Text> |
13 | <Text style={styles.subtext}>질문을 이해할거에요</Text> | 25 | <Text style={styles.subtext}>질문을 이해할거에요</Text> |
14 | </View> | 26 | </View> |
15 | - ) | ||
16 | } | 27 | } |
17 | - | 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