bluejoyq
import React from 'react';
import { View,Text, StyleSheet } from 'react-native';
import { View,Text, StyleSheet, Button } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import Swiper from 'react-native-swiper';
export default PromptSearch = () => {
return(
<View style={styles.container} >
<Swiper style={styles.wrapper} showsButtons={true} loop={false}>
<FirstSlide />
<SecondSlide />
<ThirdSlide />
<LastSlide />
</Swiper>
)
}
const FirstSlide = () => {
<View style={styles.slide1} >
<Icon name='search' style={styles.icon} size={50} />
<Text style={styles.text}>당신이 궁금해하는</Text>
<Text style={styles.text}>질문을 검색하세요</Text>
<Text style={styles.subtext}>길잡이가 당신의</Text>
<Text style={styles.subtext}>질문을 이해할거에요</Text>
</View>
)
}
const SecondSlide = () => {
<View style={styles.slide2} >
<Icon name='search' style={styles.icon} size={50} />
<Text style={styles.text}>길잡이가 수정한</Text>
<Text style={styles.text}>검색 키워드를 확인하세요</Text>
<Text style={styles.subtext}>길잡이는 항상 최적의</Text>
<Text style={styles.subtext}>검색키위드를 제안합니다</Text>
</View>
}
const ThirdSlide = () => {
<View style={styles.slide3} >
<Icon name='search' style={styles.icon} size={50} />
<Text style={styles.text}>검색 점수와 그래프로</Text>
<Text style={styles.text}>검색능력을 체크하세요</Text>
<Text style={styles.subtext}>길잡이는 당신의</Text>
<Text style={styles.subtext}>검색능력 향상시킵니다</Text>
</View>
}
const LastSlide = () => {
<View style={styles.slide4} >
<Icon name='search' style={styles.icon} size={50} />
<Text style={styles.text}> 안의 검색 도우미</Text>
<Text style={styles.text}>길잡이에서</Text>
<Text style={styles.text}>검색을 시작하세요</Text>
<Button
title="지금 바로 시작!"
onPress={() => Alert.alert('Simple Button pressed')}
/>
</View>
}
const styles = StyleSheet.create({
container: {
......@@ -39,5 +79,31 @@ const styles = StyleSheet.create({
fontSize: 20,
fontWeight: 'bold',
color:'#999999',
}
},
wrapper: {
},
slide1: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#9DD6EB',
},
slide2: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#97CAE5',
},
slide3: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#92BBD9',
},
slide4: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFF',
},
});
\ No newline at end of file
......