React 네이티브 앱 스타일링 모범 사례

소개

웹과 CSS에서 온 저는 React Native에서 제지감을 느꼈고 스타일링에 대한 개발자 경험을 개선하기 위해 몇 가지 요령을 선택해야 했습니다.
오늘날 저는 모든 프로젝트에서 네 가지 주요 트릭을 사용하며 가장 좋은 점은 독립적으로 사용할 수 있고 쉽게 구성할 수 있어 내 요구 사항과 프로젝트의 특수성에 맞게 조정할 수 있다는 것입니다.

1. 테마

응용 프로그램에 테마를 적용하려면 스타일의 일관성을 유지하고 업데이트 시 유지 관리를 쉽게 해야 합니다(글꼴이나 색상이 변경될 때 전체 코드 베이스에서 대량의 "찾기 및 바꾸기"를 방지하기 위해).
일반적으로 색상, 글꼴, 글꼴 크기, 간격, 테두리 반경, 그림자, 기본적으로 관련성이 있고 앱에서 전역적으로 사용되는 모든 것이 포함됩니다.

저는 테마를 사용하는 가장 간단한 방법인 일반 자바스크립트 객체를 사용합니다.

2. 함수와 타이프스크립트를 사용한 조건부 스타일

변수를 기반으로 여러 스타일이 필요한 경우가 많으며 이를 달성하기 위해서는 전통적으로 두 가지 방법이 있습니다.

한 가지 방법은 각 조건에 대한 스타일을 갖고 렌더링 방법을 복잡하게 만들 수 있는 구성 요소에 조건을 적용하는 것입니다.



또 다른 방법은 필요한 모든 변수를 사용하여 전체 스타일을 처리하는 함수를 만드는 것입니다.



하지만 스타일에 대한 전체 로직과 모든 변수를 한 곳에 모아야 하고 비효율적으로 보이는 많은 구성 요소에 복사/붙여넣기해야 했기 때문에 마음에 들지 않았습니다.

내 솔루션은 이 두 가지를 결합한 것입니다. 함수를 사용하지만 StyleSheets에서 필요할 때마다 직접 사용합니다(모든 곳에서 함수로 가독성을 어지럽히지 않도록 스타일에 변수가 없는 경우 이 구문을 남용하지 마십시오).



그러나 이것은 하나의 기본값을 가지고 있으며 typescript는 그것에 만족하지 않으며 유형 오류를 제거하기 위해 d.ts 파일에서 정의를 선언해야 합니다.

Gist of the code

3. 단일 기능의 반응형 디자인

디자인이 모든 화면에서 완벽하게 작동하도록 만드는 것은 어렵기 때문에 이 단일 도우미로 거의 모든 문제를 해결합니다.

Gist of the code

iPhone 11보다 작은 모든 화면 크기의 경우 크기가 축소되고 더 큰 화면의 경우 확대됩니다(태블릿용이 아니며 작동할 수 있더라도 일반적으로 디자인을 태블릿 화면으로 변환하는 것이 더 복잡함).

그런 다음 스타일에서 사용할 수 있습니다.

button : {height:normalize(40)}

여전히 작은 화면에서 특별히 확인하고 조정해야 할 사항이 많지만 대부분의 경우 여전히 많은 도움이 됩니다.

4. 유틸리티 "클래스"

나는 내가 작성한 대부분의 스타일이 소수의 속성에 불과하다는 것을 깨달았고 간격 및 유연성에 대해서만 파일을 작성할 것입니다.
모든 곳에서 margin-top만 있는 20개의 파일을 피하기 위해 이러한 속성이 있는 단일 스타일 파일을 만들었고 모든 구성 요소와 화면에 사용할 수 있습니다. 기본 반응에 적용된 "css 유틸리티 클래스"에서 영감을 받았습니다.

동일한 스타일의 파일을 반복해서 생성하지 않도록 합니다

.

쉽게 테마에 연결하고 일관성을 유지할 수 있습니다.

번거로움을 피하고 모든 항목의 이름 찾기

내가 찾을 수 있는 유일한 단점은 우리가 모든 속성을 추가하고 구성 요소의 가독성을 약화시키는 Tailwind와 같은 스타일의 큰 배열을 가질 수 있다는 것입니다. 최대 2-3개의 속성을 고수하고 여전히 스타일 파일을 작성하는 것이 좋습니다. 필요할 땐

😄 읽어주셔서 감사합니다! 이 기사가 유용하다고 생각되면 더 많은 팁을 원하고 저만의 스타트업 스튜디오를 만드는 여정을 따르세요.