룰 1
<div> 대신 <View>를 사용한다.
모든 <view>들은 이미 flexbox인 상태이고, flexDirection은 Column인 상태이다.
룰2
모든 text들은 <Text></Text> 안에 들어가야한다.
룰3
브라우저에서 사용한던 모든 css스타일을 사용할 수는 없다.
스타일을 사용할때는
const styles = StyleSheet.create (
{
container =: {
flex : 1,
backgroundColor : "red"
alignItems : "center"
}
}
)
이런식으로 사용
<StatusBar /> 은 화면 위쪽의 시계, 배터리, 와이파이 등을 말한다
레이아웃 시스템
레이아웃을 만들때 height width 등에 px값을 주는 것이 아닌 다른 많은 스크린들에서 동일한 방식으로 보여지는 반응형 레이아웃을 만들어야함.
ex.
city : {
flex : 1,
backgroundColor : '#79EDFF',
justifyContent : "center",
alignItems : "center",
},
flex를 사용해서 반응형 레이아웃을 만든다.
스크롤이 가능한 구역을 만들때 ScrollView를 임포트해서 쓴다
ScrollView를 사용할때 스타일은 contentContainerStyle = {styles.weather} 이런식으로 사용함
ex. <ScrollView horizontal contentContainerStyle={styles.weather} pagingEnabled
showsHorizontalScrollIndicator={false}>
horizontal 은 스크롤을 가로로 할 수 있게 만듬
pagingEnabled 는 스콜할때 끝까지 넘겨야 화면이 넘어가게 만듬
showsHorizontalScrollIndicator={false} 는 스크롤할때 바가 보이지 않게 만들어줌
스크린 사이즈를 가져오고 싶을때는 Dimensions를 임포트해서 쓴다.
ex. const{width:SCREEN_WIDTH} = Dimensions.get("winidow");
city : {
width : SCREEN_WIDTH;
}