스타일

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

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

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

일반적으로 사용하는 패턴 중 하나는 컴포넌트가 style prop을 받아 하위 컴포넌트를 스타일링하는 것이다. 이를 통해 CSS처럼 스타일을 "캐스케이드"할 수 있다.

텍스트 스타일을 커스텀하는 방법은 더 많다. 전체 목록은 Text 컴포넌트 레퍼런스를 참고한다.

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

알려진 문제

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