[React Native] StyleSheet와 CSS의 주요 차이점

 

 

StyleSheet와 CSS의 주요 차이점

• 셀렉터라는 개념이 없다.
• 모든 스타일 속성은 camelCase로 작성한다.
• display 속성은 기본적을 flex이며 , 다른 값은 none 밖에 없다.
• flexDirection 속성의 기본값은 웹에서는 rew이지만, 리액트 네이비트에서는 column 이다.
• 리액트 네이티브에서 스타일링할 때 숫자 단위는 dp 뿐이다.
• background 대신 backgroundColor를 사용해야 한다.
• border 대신 borderWidth, borderStyle, borderColor 등을 따로따로 설정해야 한다. (축약형이 없다.)
  

 

 

---

 

리액트 네이티브에서는 별도의 CSS 파일에 스타일을 작성하지 않고,

자바스크립트 파일 안에서 StyelSheet라는 것을 사용한다.

const style = StyleSheet.create({
	container: {
    	backgroundColor: 'pink',
        color: 'blue'
        borderWidth: 3,
        borderStyle: 'solid',
        borderColor: 'blue'
    },
	title: {
     // (...)
    }
})

 

 

---

 

도움이 될만한 자료 :

https://reactnative.dev/docs/stylesheet

StyleSheet · React Native