반응형 UX 개발을 위한 React Native Paper 컴포넌트 확장 방법
여기에서는 React Native를 기반으로 하는 Universal Application을 개발하고 React Native Paper와 같은 디자인 라이브러리를 사용하는 측면에서 경험을 향상시키는 단계를 안내해 드리겠습니다.
우리 팀은 최근 NextJS를 기반으로 한 프로젝트의 MVC용 웹 버전을 개발했습니다. Material UI(v5)를 디자인 시스템으로 사용했습니다. 이 프로젝트가 생명권을 확인하자마자 고객은 모바일 응용 프로그램을 개발하기를 원했습니다. 그들은 계속하기로 결정했습니다 범용 애플리케이션 React Native 위에 레이어로 Expo를 기반으로 하는 iOS, Android 및 웹 플랫폼에 대한 접근 방식입니다.
첫 번째 과제는 Material UI 대신 어떤 라이브러리를 사용해야 하는지입니다. Native Base 또는 React Native Paper의 두 가지 옵션이 있습니다. 우리는 집어 들었다 네이티브 페이퍼에 반응. 하지만 반응형 디자인으로 크로스 플랫폼 시스템을 개발 중이기 때문에 React Native Paper에는 이를 원활하게 구현할 수 있는 도구가 부족합니다. 반면에 Material UI 경험에 익숙해졌고 이전에 개발한 웹 애플리케이션을 Universal Application으로 마이그레이션하는 노력을 최소화하고 싶습니다.
여기에서는 유연성 측면에서 Material UI를 닫고 중단점에 따라 스타일을 정의하는 기능이 있는 React Native Paper 구성 요소를 확장하는 몇 가지 간단한 유틸리티를 소개합니다. 이 접근 방식은 수정을 통해 다른 라이브러리에 적용할 수 있습니다.
현재 중단점에 따라 변경되는 글꼴 크기를 가진 제목을 갖고 싶다고 가정해 봅시다. 글쎄, 나는 다음 API에 만족할 것이다:
xs: {fontSize: 14},
sm: {fontSize: 16},
md: {fontSize: 20},
lg: {fontSize: 26},
xl: {fontSize: 32}
}}>
Title
이 API는 자명하다고 가정합니다.
1.1 React Native Paper의 Theme 객체 확장
기본적으로 React Native Paper 테마에는 중단점에 대한 정보가 없지만 추가할 문제는 아닙니다. Typescript로 프로젝트를 시작했기 때문에 처음에는 재정의해야 합니다. Theme 다음을 통해 입력 글로벌 증강 새로운 분야를 소개합니다:
여기에 두 가지 새로운 유형이 도입되었습니다. Breakpoints , ThemeBreakpoints 이미 존재하는 유형에 새 속성을 추가했습니다. Theme전역 네임스페이스를 통해 사용할 수 있는 React Native Paper에 있습니다. 이제 확장 테마에 대한 특정 값을 설정하고 각 중단점을 설명할 차례입니다.
바로 지금, 중단점을 사용할 수 있습니다. useTheme React Native Paper의 후크:
1.2 중단점 후크 개발
현재 화면 너비에 맞는 중단점을 정의하는 후크를 개발해 보겠습니다. 예를 들어 width=500 — 0(xs) < 500 < 600(sm) 그러므로 그것은 xs 그 사이에 중단점 width=700 그것의 sm 중단점 600(sm)< 700 < 900(md) :
여기서 우리는 빌트인을 사용했습니다. useWindowDimension 에서 후크 react-native 자동으로 업데이트 width 그리고 height 화면 크기가 변경될 때의 값입니다. 새로운 너비를 기반으로 대상 중단점을 찾습니다. 테스트해 보겠습니다.
웹에서 테스트했지만 iOS 및 Android에서도 작동합니다.
1.3 스타일링 가능성을 확장하는 Component 개발
여기에서 주요 부분을 설명합니다. 목표는 화면의 현재 중단점에 따라 특정 스타일을 적용하는 것입니다. 다음이 있는 React 구성 요소에만 의미가 있습니다. style 특성. 우리는 그들을 위해 새로운 속성을 소개하고 싶습니다 — sx 필요한 경우 일부 중단점에 대한 스타일 목록을 정의할 수 있습니다. 여기에 인기 있는 React 패턴 중 하나를 적용할 수 있을 것 같습니다. 고차 부품대상 구성 요소에 새 속성을 가져오고 동작을 확장합니다.
High Order Component가 무엇인지 모르는 경우 이 주제에 대한 기사를 작성했습니다. 도움이 되기를 바랍니다. 여기 링크를 클릭하세요.
먼저 미래의 HOC를 위한 셸을 만들어 보겠습니다.
지금까지는 쓸모없는 HOC이지만 숨을 고르고 유형에 집중해야 합니다. 이미 말했듯이, 우리는 다음을 가진 구성 요소만 확장하는 것을 목표로 합니다. style 속성, 따라서 우리는 React 구성 요소 소품에 제한을 둘 필요가 있으며 다음과 같이 했습니다. Props xtend {style?: StyleProp} 이는 구성 요소 소품이 다음을 포함해야 함을 의미합니다. style 특성. 없는 구성 요소에 대해 이 HOC를 사용하려고 하면 style 속성, TS는 다음과 같은 문제를 제기합니다.
HOC에 대한 구현을 추가해 보겠습니다.
여기에 특별한 것은 없습니다. 우리는 이전에 개발한 것을 사용합니다. useBreakpoint 현재 중단점을 정의하고 중단점과 연결된 스타일을 전달된 스타일로 병합하는 후크 style 특성.
1.4 개발된 HOC로 React Native Paper 컴포넌트를 확장하는 방법
그것이 우리가 해야 할 마지막 일이어야 합니다. 해 보자 Text React Native Paper 라이브러리의 구성 요소를 만들고 개발된 HOC로 동작을 확장합니다. 매우 간단합니다.
이 구성 요소를 사용하는 방법은 다음과 같습니다.
웹에서 테스트했지만 iOS 및 Android에서도 작동합니다.
거의 완료했지만 TypeScript 경험을 향상시킬 수 있습니다. TypeScript는 대부분의 경우 전달된 인수에서 유형을 유추할 수 있지만 TS가 수행한 방법을 살펴보겠습니다. sx 특성:
그것은 unknown 재산, 그리고 그것은 우리가 어떤 것을 넣을 수 있음을 의미합니다 style 속성이 원래 존재하지 않더라도 Text 에서 배달된 구성 요소 react-native-paper 다음과 같은 라이브러리:
글쎄, 우리는 그것을 쉽게 고칠 수 있습니다. 제네릭의 유형을 정의합시다. Style 그리고 Props 명시적으로:
Typescript는 즉시 문제를 제기합니다.
모든 코드는 https://github.com/vladimirtopolev/react-native-paper-extended에서 찾을 수 있습니다.
범용 애플리케이션을 개발하면 개발 비용이 크게 절감되지만 React Native에는 여전히 Material UI와 같은 라이브러리에서 React Native와 호환되는 라이브러리로 경험을 원활하게 마이그레이션하는 디자인 라이브러리가 없습니다. 반면에 HOC와 이를 확장하고 API를 Material UI에 가깝게 만드는 후크를 구현하는 것은 어렵지 않습니다.
그럼에도 불구하고이 기사에서 우리는 확장 할 것입니다 react-native-paper 구성 요소이지만 React Native 구성 요소에서도 빌트인을 위해 효율적으로 완료할 수 있습니다. 여기서 핵심은 접근 방식입니다.
댓글