직접 앱 화면을 만들어보라는 예습 과제를 대뜸 받게 되어 엄청난 오류의 향연을 겪으며 맨땅에 헤딩하는 중.
CSS에 익숙해져서 나는 오류가 아주 많았는데, 검색하다가 이런 글을 발견하게 되어 나중에 찬찬히 읽어보려고 첨부.
https://wit.nts-corp.com/2020/03/23/6014
CSS와 리액트 네이티브의 차이를 적어두었는데 그걸 읽으니 '왜 이게 안 돼~!!' 하던 게 많이 해결되었다ㅠㅠ
공식문서들은 왜 전부 영어인 거지......
각국의 언어로도 번역해주세요......
그리고 예시 코드가 너무 부족해ㅠㅠㅠㅠㅠㅠ
오류가 너무 많이 나니까 급기야 프로그램에게 화를 내며 만지다가 결국 포기!!!!
이게 원래 만들었어야 할 모습
이게 내가 하다가 포기한 예습 과제
import React from 'react' ;
import main from './assets/main.png' ;
import { StyleSheet , Text , View , Image , TouchableOpacity , ScrollView } from 'react-native' ;
export default function App() {
console.disableYellowBox = true;
//return 구문 밖에서는 슬래시 두개 방식으로 주석
return ()
}
const styles = StyleSheet.create({})
이게 리액트 네이티브의 기본 함수 골격이니까 복사해둔 뒤 가져다 쓰라고 강사님이 추천.
alingItems는 무조건 flex 영역 안에서만 동작한다.
이미지는 width와 height로, 혹은 flex로 영역을 잡아줘야만 화면에 나타난다.
강사님 그대로 따라하니까 또 잘 된다...최종 완성 코드는 아래로!!
import React from 'react' ;
import main from './assets/main.png' ;
import { StyleSheet , Text , View , Image , TouchableOpacity , ScrollView } from 'react-native' ;
export default function App () {
console . disableYellowBox = true ;
//return 구문 밖에서는 슬래시 두개 방식으로 주석
return ( < ScrollView style = { styles . container } >
< Text style = { styles . title } > 나만의 꿀팁 </ Text >
< Image style = { styles . mainImage } source = { main } />
< ScrollView style = { styles . middleContainer } horizontal = {true} >
< TouchableOpacity style = { styles . middleButtion01 } >< Text style = { styles . middleButtonText } > 생활 </ Text ></ TouchableOpacity >
< TouchableOpacity style = { styles . middleButtion02 } >< Text style = { styles . middleButtonText } > 재테크 </ Text ></ TouchableOpacity >
< TouchableOpacity style = { styles . middleButtion03 } >< Text style = { styles . middleButtonText } > 반려견 </ Text ></ TouchableOpacity >
< TouchableOpacity style = { styles . middleButtion04 } >< Text style = { styles . middleButtonText } > 꿀팁 찜 </ Text ></ TouchableOpacity >
</ ScrollView >
< View style = { styles . cardContainer } >
{ /* 하나의 카드 영역을 나타내는 view */ }
< View style = { styles . card } >
< View style = { styles . cardText } >
< Text style = { styles . cardTitle } > 먹다 남은 피자를 촉촉하게! </ Text >
< Text style = { styles . cardDesc } numberOfLines = { 3 } > 먹다 남은 피자는 수분이 날라가기 때문에 처음처럼 맛있게 먹을 수 없는데요. 이럴 경우 그릇에 물을 받아 전자레인지 안에서 1분 30초에서 2분 정도 함께 돌려주면 촉촉하게 먹을 수 있습니다. 물이 전자레인지 안에서 수증기를 일으키고, 피자에 촉촉함을 더해줍니다.
</ Text >
< Text style = { styles . cardDate } > 2020.09.09 </ Text >
</ View >
</ View >
</ View >
</ ScrollView > )
}
const styles = StyleSheet . create ({
container : {
backgroundColor : "#fff"
},
title : {
fontSize : 20 ,
fontWeight : "700" ,
marginTop : 50 ,
marginLeft : 20
},
mainImage : {
width : "90%" ,
height : 200 ,
borderRadius : 10 ,
marginTop : 20 ,
alignSelf : 'center'
},
middleContainer : {
marginTop : 20 ,
marginLeft : 10 ,
height : 60
},
middleButtion01 : {
width : 100 ,
height : 50 ,
padding : 15 ,
backgroundColor : "#fdc453" ,
borderRadius : 15 ,
margin : 7
},
middleButtion02 : {
width : 100 ,
height : 50 ,
padding : 15 ,
backgroundColor : "#FF8181" ,
borderRadius : 15 ,
margin : 7
},
middleButtion03 : {
width : 100 ,
height : 50 ,
padding : 15 ,
backgroundColor : "#B6F3D7" ,
borderRadius : 15 ,
margin : 7
},
middleButtion04 : {
width : 100 ,
height : 50 ,
padding : 15 ,
backgroundColor : "#FDD3FA" ,
borderRadius : 15 ,
margin : 7
},
middleButtonText : {
color : "#fff" ,
fontWeight : "700" ,
textAlign : "center"
},
cardContainer : {
marginTop : 10 ,
marginLeft : 10
},
card : {
flex : 1 ,
flexDirection : "row" ,
margin : 10
},
cardImage : {
flex : 1 ,
width : 100 ,
height : 100 ,
borderRadius : 10
},
cardText : {
flex : 2 ,
//felxDirection은 디폴트가 colum이라 안 적어도 됨.
marginLeft : 10
},
cardTitle : {
fontSize : 18 ,
fontWeight : '700'
},
cardDesc : {
fontSize : 14
},
cardDate : {
fontSize : 11
}
})
