김서영

start manual

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
......