스타일

React Native에서는 자바스크립트를 사용해 애플리케이션의 스타일을 지정한다. 모든 코어 컴포넌트는 style이라는 prop을 받는다. 스타일 이름과 값은 일반적으로 웹에서의 CSS와 비슷하지만, 이름은 카멜 케이스로 작성된다. 예를 들어 background-color 대신 backgroundColor를 사용한다.

style prop은 일반 자바스립트 객체로 지정할 수 있다. 예제 코드에서 주로 사용하는 방식이다. 또한 스타일 배열을 전달할 수도 있다. 배열의 마지막 스타일이 우선 적용되므로, 이를 통해 스타일을 상속받을 수 있다.

컴포넌트가 복잡해질수록 StyleSheet.create를 사용해 여러 스타일을 한곳에 정의하는 것이 더 깔끔하다. 다음은 그 예제이다:

일반적으로 사용하는 패턴 중 하나는 컴포넌트가 style prop을 받아 하위 컴포넌트에 스타일을 적용하는 것이다. 이를 통해 CSS에서와 같은 방식으로 스타일을 캐스케이드할 수 있다.

텍스트 스타일을 커스터마이징하는 다양한 방법이 있다. 전체 목록을 확인하려면 Text 컴포넌트 레퍼런스를 참고한다.

이제 텍스트를 아름답게 꾸밀 수 있다. 스타일 전문가가 되기 위한 다음 단계는 컴포넌트 크기를 제어하는 방법을 배우는 것이다.

알려진 이슈

• react-native#29308: 경우에 따라 React Native가 웹에서의 CSS 동작과 일치하지 않는다. 예를 들어, 터치 영역이 부모 뷰의 경계를 넘어가지 않으며, Android에서는 음수 마진을 지원하지 않는다.