* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
2주가 숙제에서 제가 작성한 코드와 강의자료에 올라와 있는 코드를 차이를 보니까, margin과 padding의 사용이더라구요.
저는 text 스타일에 위 콘텐츠와의 이격을 벌리려고 margin을 사용하고 textAlign으로 가운데 정렬을 했는데요.
강의 자료에 모든 text 스타일에 textAlign:"center"이 있는데도 padding을 잡아두셨더라구요.
실제로 따라서 넣어봐도 차이가 없는 거 같은데 왜 padding이 들어가는 건지 궁금합니다.
아 그리고, container, 그러니까 전제 Veiw태크 스타일에 flex=1 이 왜 들어가는 지도 궁금해요.
영역구분이라고 알고 있는데, 그냥 통짜라서 구분할 필요가 없잖아요???
제가 작성한 코드 입니다.
import React from 'react'
import {StyleSheet, View,Text, Image, TouchableOpacity} from 'react-native'
const main = 'https://storage.googleapis.com/sparta-image.appspot.com/lecture/about.png'
export default function AboutPage(){
return (
<View style={styles.MainContainer}>
<Text style={styles.title}>HI!스파르타코딩 앱개발 반에 오신것을 환영합니다</Text>
<View style={styles.content}>
<Image style={styles.cardImage} source={{uri:main}} resizeMode='cover'/>
<Text style={styles.text1}>많은 내용을 간결하게 담아내려 노력했습니다!</Text>
<Text style={styles.text2}>꼭 완주 하셔서 꼭 여러분것으로 만들어가시길 바랍니다</Text>
<TouchableOpacity style={styles.button}><Text style={styles.buttonText}>여러분의 인스타계정</Text></TouchableOpacity>
</View>
</View>)
}
const styles = StyleSheet.create({
MainContainer:{
backgroundColor: '#191970',
alignItems: "center",
},
title:{
fontSize: 37,
fontWeight: '600',
color:"#fff",
marginTop:100,
textAlign: 'center',
},
content:{
width:360,
height:500,
backgroundColor:"#fff",
marginTop: 50,
borderRadius:30,
justifyContent:"center",
alignItems: "center",
},
cardImage:{
width:150,
height:150,
borderRadius:30,
marginTop: 50,
},
text1: {
marginTop:10,
fontSize: 23,
fontWeight: '600',
textAlign: 'center',
},
text2: {
marginTop:15,
fontWeight: '300',
fontSize: 18,
textAlign: 'center',
},
button: {
width:190,
height:60,
backgroundColor:'#ffd700',
marginTop:15,
borderRadius:15,
alignItems: "center",
},
buttonText: {
marginTop: 20,
fontSize: 15,
fontWeight: '700',
textAlign: 'center',
color:"#fff",
}
});
강의자료의 코드입니다.
import React from 'react'
import {View,Text,StyleSheet,Image, TouchableOpacity} from 'react-native'
export default function AboutPage(){
const aboutImage = "https://storage.googleapis.com/sparta-image.appspot.com/lecture/about.png"
return (
<View style={styles.container}>
<Text style={styles.title}>HI! 스파르타코딩 앱개발 반에 오신것을 환영합니다</Text>
<View style={styles.textContainer}>
<Image style={styles.aboutImage} source={{uri:aboutImage}} resizeMode={"cover"}/>
<Text style={styles.desc01}>많은 내용을 간결하게 담아내려 노력했습니다!</Text>
<Text style={styles.desc02}>꼭 완주 하셔서 꼭 여러분것으로 만들어가시길 바랍니다</Text>
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>여러분의 인스타계정</Text>
</TouchableOpacity>
</View>
</View>)
}
const styles = StyleSheet.create({
container: {
flex:1,
backgroundColor:"#1F266A",
alignItems:"center"
},
title: {
fontSize:30,
fontWeight:"700",
color:"#fff",
paddingLeft:30,
paddingTop:100,
paddingRight:30
},
textContainer: {
width:300,
height:500,
backgroundColor:"#fff",
marginTop:50,
borderRadius:30,
justifyContent:"center",
alignItems:"center"
},
aboutImage:{
width:150,
height:150,
borderRadius:30
},
desc01: {
textAlign:"center",
fontSize:20,
fontWeight:"700",
paddingLeft:22,
paddingRight:22
},
desc02: {
textAlign:"center",
fontSize:15,
fontWeight:"700",
padding:22
},
button:{
backgroundColor:"orange",
padding:20,
borderRadius:15
},
buttonText: {
color:"#fff",
fontSize:15,
fontWeight:"700"
}
})
