import React, { useEffect,useState } from 'react'
import {SafeAreaView,View,Text,StyleSheet,Image,TouchableOpacity} from 'react-native'
export default function AboutPage({navigation,route}){
useEffect(()=>{
navigation.setOptions({
title:"소개 페이지",
headerStyle: {
backgroundColor: '#00008b',
shadowColor: "##00008b",
},
headerTintColor: "#fff",
})
},[])
return (
<SafeAreaView style={styles.container}>
<View style={styles.itemcontainer}>
<Text style={styles.title}>HI! 스파르타코딩 앱개발 반에 오신것을 환영합니다</Text>
</View>
<View style={styles.item1}>
<Image style={styles.mainImage} source={{uri:about}}/>
<Text style={styles.card1}>많은 내용을 간결하게 담아내려 노력했습니다!</Text>
<Text style={styles.card2}>꼭 완주하셔서 꼭 여러분것으로 만들어가시길 바랍니다</Text>
<TouchableOpacity style={styles.middleButton04}><Text style={styles.ButtonText}>여러분의 인스타계정</Text></TouchableOpacity>
</View>
</SafeAreaView>)
}
const styles = StyleSheet.create({
container: {
//앱의 배경 색
flex : 1,
backgroundColor: '#00008b',
},
itemcontainer:
{
justifyContent:'center',
},
title: {
//폰트 사이즈
fontSize: 31,
//폰트 두께
fontWeight: '500',
//위 공간으로 부터 이격
marginTop:70,
//왼쪽 공간으로 부터 이격
color : '#fff',
textAlign: 'left',
alignSelf: 'center'
},
item1: {
backgroundColor:'#fff',
width:250,
height:440,
alignContent:'center',
margin:50,
marginTop:70,
borderRadius:20,
alignItems:'center'
},
mainImage: {
width:130,
height:130,
alignSelf:'center',
marginTop:60,
borderRadius:20,
},
card1 : {
fontSize:17,
textAlign:'center',
fontWeight: '700',
},
card2 : {
fontSize:12,
textAlign:'center',
marginTop:20,
fontWeight: '600',
},
middleButton04:{
width:160,
height:50,
padding:15,
backgroundColor:"#fdc453",
borderColor:"deeppink",
borderRadius:15,
marginTop : 20,
},
ButtonText : {
color : '#fff',
textAlign: 'center',
alignSelf: 'center'
},
})
저 소개 페이지 밑에 흰색줄은 어떻게 없앨까요 ㅠ
