2020 년에 알아야 할 15 가지 React Native Component 라이브러리

알아야 할 기본 구성 요소 라이브러리에 반응


React Native 컴포넌트 라이브러리는 다음 앱 프로젝트에서 작업 할 때 시간을 크게 절약 할 수 있습니다. 어떻게 오세요? 자, React 자체부터 시작하겠습니다. React는 웹 기반 및 모바일 앱 모두에 대한 사용자 인터페이스를 구축하는 데 도움이되는 오픈 소스 JavaScript 라이브러리라는 것을 알고있을 것입니다. 앱에 쉽게 사용할 수있는 많은 구성 요소가 포함되어 있습니다..

일반적으로 React에서 컴포넌트를 빌드 할 때 대상 플랫폼의 지침에 맞게 스타일을 지정해야합니다. 그 곳에 네이티브 반응 도울 수있다. 대상 플랫폼의 기본 기능과 함께 React를 사용하여 모바일 앱을 개발하는 데 사용할 수있는 프레임 워크입니다..

이전에는 최고의 UI 구성 요소 라이브러리 및 프레임 워크를 갖춘 게시물을 작성했습니다. 이 글에서는 React Native 컴포넌트 라이브러리에 대해 자세히 살펴 보겠습니다..

올해 최고의 리 액트 네이티브 컴포넌트 라이브러리

1. NativeBase

베스트 리 액트 네이티브 컴포넌트 라이브러리 # 1 : NativeBase

다른 플랫폼에 대해 React 컴포넌트를 다시 작성한다면 동적 프론트 엔드 프레임 워크 인 NativeBase를 사용해야합니다. 라이브러리는 필수 크로스 플랫폼 React Native 컴포넌트의 모음이며 앱 빌드를 시작하기에 좋은 곳입니다. 컴포넌트는 사용자 정의 가능한 특성이있는 일부 JavaScript 기능과 결합 된 React Native로 빌드됩니다. 즉시 사용 가능한 타사 기본 라이브러리를 사용할 수도 있습니다.

NativeBase는 완전히 오픈 소스이며 12,000 개 이상의 별이 있습니다. 깃 허브. 그러나 더 많은 기능과 화면이 추가됨에 따라 테마가 프리미엄 화됩니다. 이제 NativeBase를 사용할 수 있습니다 웹 사용자 너무. 동일한 JavaScript 코드베이스를 사용하고 Android 및 iOS 용 플랫폼 별 디자인을 사용하여 앱의 기본 모양과 느낌을 얻을 수 있습니다. 오픈 소스 프로젝트에는 Native Starter 앱, Twitter Clone 앱, ToDo 앱 및 튜토리얼 앱이 포함됩니다. 프리미엄 바스켓에는 예약, 대여, 구인 목록, 메시지 등을위한 초보자 용 앱이 있습니다..

2. 머티리얼 키트 반응 네이티브

최고의 반응 네이티브 컴포넌트 라이브러리 # 2 : material-kit-react-native

Material Kit React Native는 머티리얼 디자인이 포함 된 무료 네이티브 앱 템플릿을 제공합니다. 내장 갈 리오 프레임 워크, 가장 일반적인 구성 요소를 재 설계하여 일을 최소화하고 Google의 머티리얼 디자인에 맞춰 조정합니다. 사용하기 쉽고 버튼, 카드, 내비게이션 및 입력과 같은 200 개 이상의 수공예 요소가 포함되어 있습니다. 모든 구성 요소는 테마를 변경하여 다양한 색상을 사용할 수 있습니다. 또한 5 개의 맞춤 플러그인과 5 개의 예제 페이지가 있습니다..

에 200 별 가까이 깃 허브, 그것은 제공합니다 프로 버전 더 많은 예제 페이지와 문서에 액세스 할 수 있습니다.

삼. 기본 요소에 반응

최고의 React Native 컴포넌트 라이브러리 # 3 : react-native-elements

React Native Elements는 크로스 플랫폼 React Native UI 툴킷으로 개발자가 만든 수많은 훌륭한 오픈 소스 UI 구성 요소를 한 곳에 모아 놓았습니다. React Native Elements가 결합한 패키지를 살펴보고 API가 일관된 모양과 느낌을 갖도록 할 수 있습니다. 별 17,000 개를 받았다는 것은 놀라운 일이 아닙니다. 깃 허브.

패키지에는 가격, 배지, 오버레이, 분배기 및 플랫폼 별 검색 막대와 같은 전체 구성 요소가 포함되어 있습니다. 사용하기 쉽고 실제로 사용자 정의 할 수 있습니다. 모든 구성 요소의 소품은 하나의 중앙 위치에 정의되어 있으므로 구성 요소를 쉽게 업데이트하거나 수정할 수 있습니다. 또한 오픈 소스 기여로 상용 React Native 앱을 개발하는 소규모 팀을 연결하는 플랫폼 역할을 할 수 있습니다.

웹 기반 프로젝트에 React Native를 사용하려면 네이티브 웹에 반응. JavaScript로 빠르고 적응 형 UI를 만들 수 있으며 React Dev 도구와 통합됩니다. React Native 앱과 웹 앱간에 코드베이스를 공유 할 수 있습니다. 입력 모드로 유형, 클릭 또는 스 와이프를 지원하며, 접근성 및 RTL이 기본 제공되며 Twitter, Uber 및 Flipkart와 같은 사람들이 사용합니다..

4. 반응 네이티브 로티

로티

Lottie는 모바일 용 Airbnb 라이브러리로 앱에 애니메이션을 추가 할 수 있도록 도와줍니다. 일반적으로 Adobe After Effects에서 애니메이션을 만든 후에는 웹 앱에서 사용할 수있는 형식으로 애니메이션을 변환해야합니다. 로티는 이것을 도와줍니다.

After Effects 확장 인 BodyMovin에서 JSON 형식의 애니메이션 데이터를 내 보내서 작동합니다. 이 확장 프로그램은 웹에서 애니메이션을 렌더링하기 위해 JS 플레이어와 번들로 제공됩니다. React Native에서도 작동하며 공식 문서에 액세스 할 수 있습니다 깃 허브 12,000 개의 별에 가까워진 곳.

Lottie 라이브러리 및 플러그인은 무료로 사용 가능, 선별 된 애니메이션 파일 모음을 사용하여 앱을 매력적이고 흥미롭게 만들 수 있습니다. 애니메이션 파일은 크기가 작고 벡터 형식입니다. 따라서 앱 성능에 영향을 미치지 않아야합니다. 동시에 UI를 강화하고 시각적으로 더 매력적으로 만들 수 있습니다..

5. 기본 벡터 아이콘 반응

반응 네이티브 벡터 아이콘

찾고있는 것이 앱에서 사용할 아이콘이있는 경우 가장 좋은 React Native 구성 요소 라이브러리 중 하나입니다. 3,000 개가 넘는 아이콘 라이브러리를 통해 필요에 맞는 것을 찾을 수 있습니다. 또한 아이콘을 프로젝트에 통합하면서 아이콘을 사용자 정의, 스타일 및 확장 할 수 있습니다.

이 패키지는 이미지 소스 및 다중 스타일 글꼴뿐만 아니라 TabBar 및 Toolbar Android를 지원합니다. 에 12,000 별 가까이 깃 허브, 버튼, 로고 및 탐색 표시 줄에 완벽하게 맞을 수 있습니다. 에 그립니다 네이티브의 애니메이션 라이브러리 반응 아이콘과 결합하여 애니메이션 구성 요소를 만듭니다. CSS 파일과 연결된 아이콘 글꼴이 이미있는 경우 “생성 아이콘”스크립트를 사용하여 아이콘 세트를 쉽게 생성 할 수 있습니다..

6. CLI 점화

점화

Ignite CLI는 React Native 앱을위한 견고한 스타터 키트입니다. 기본적으로 기본 React Native 상용구는 기본 앱 제작을 쉽게 도와줍니다. 보일러 플레이트를 프로젝트에 맞게 조정할 수 있도록 해주 며 설치시 모범 사례를 쉽게 준수하고 준수합니다. 기본적으로 Android 및 iOS 모두에서 작동합니다. 독립형 플러그인도 지원합니다.

또한 많은 상용구 중에서 선택하거나 직접 시작할 수 있습니다. 모듈 식 플러그인 시스템을 사용하면 애플리케이션 기능을 추가하거나 직접 작성할 수 있습니다. 사용 예제 화면을 통해 타사 라이브러리를 테스트하고 여러 구성 요소로 구성된 앱을 빌드 할 수 있습니다. 화면에는 기본 구성 요소로 구축 된 일반적으로 사용되는 앱의 예도 포함되어 있습니다. 구성 요소를 식별하고 쉽게 변경할 수 있도록이 화면은 구성 요소 파일에 예제를 등록합니다. 이 화면에서 팀과 구성 요소를 테스트, 사용 및 공유 할 수 있습니다. Ignite CLI는 10,000 개 이상의 별을 획득했습니다 깃 허브.

7. 네이티브 맵뷰 반응

반응 네이티브 맵

Android 및 iOS 용 맵 구성 요소를 제공하는 React Native 구성 요소 라이브러리 중 하나는 React Native Mapview입니다. 마커 및 다각형과 같은지도의 일반 지형지 물은 Mapview 구성 요소의 하위 항목으로 지정됩니다. 이를 통해 API가지도의 기능을 직관적으로 직관적으로 제어 할 수 있습니다. 귀하는 Google 콘솔에서 Google Maps API를 사용하도록 설정해야합니다.

지도 스타일을 맞춤 설정하기 위해 할 수있는 일은 많이 있습니다. Google지도에서지도보기 위치를 변경하고 지역 / 위치를 추적하고 관심 장소를 클릭 할 수 있습니다. 지정된 마커 나 좌표를 확대하거나 애니메이션 할 수 있습니다. 소품에 애니메이션 영역 값을 할당하면 Mapview는 애니메이션 API를 사용하여지도의 중심과 확대 / 축소를 제어 할 수 있습니다. 맞춤 마커를 지정하지 않으면 기본 마커가 렌더링됩니다..

멋진 점은 마커를 드래그 할 수 있고 이미지를 사용하여 맞춤 설정할 수 있으며 드래그하는 동안 다른 UI를 업데이트한다는 것입니다. 더 필요한 경우 마커, 다각형 제작자 및 원과 다각형 오버레이에 대한 맞춤 설명 선이 있습니다. iOS 사용자는 그라디언트 폴리 라인을 만들 수 있습니다. 별이 10,000 개 이상인 것은 놀라운 일이 아닙니다. 깃 허브.

8. 기본 영재 채팅에 반응

반응 네이티브 선물 채팅

이름에서 알 수 있듯이 React Native Gifted Chat은 React Native (및 웹)에 대한 채팅 UI를 설정하는 데 도움이됩니다. TypeScript로 작성되었으며 이전 메시지를로드하거나 메시지를 클립 보드 등에 복사하는 데 도움이되는 완전히 사용자 정의 가능한 구성 요소가 포함되어 있습니다. 사용자가 키보드를 건너 뛰는 데 도움이되는 InputToolbar도 있습니다.

사용자 경험을 향상시키기 위해 Avatar를 사용자의 이니셜, 현지화 된 날짜, 여러 줄 문자 입력, 빠른 응답 메시지 (봇) 및 시스템 메시지로 사용할 수 있습니다. Redux도 지원합니다. 영재 채팅에 별이 8,000 개 이상 있습니다. 깃 허브.

9. 네이티브 UI 고양이 반응

반응 네이티브 UI 키튼

전자 상거래를 포함한 모든 도메인의 모바일 앱용 스타터 키트로 사용할 수있는 React Native 구성 요소 라이브러리 중 하나는 React Native UI Kitten입니다. 에바 디자인 시스템. 별 5,000 개 이상의 별을 기준으로 깃 허브, 시각적 인 외관을 관리하기 위해 동일한 방식으로 스타일링 된 약 20 개의 범용 컴포넌트 세트.

이 무료 오픈 소스 라이브러리를 사용하면 구성 요소의 소스 코드를 변경하지 않고도 제공된 테마를 사용하거나 자신 만의 테마를 만들 수 있습니다. 또한 런타임에 페이지를 다시로드하지 않고도 어두운 테마와 밝은 테마를 전환 할 수 있습니다. NPM에서 UI Kitten 패키지를 설치하면 구성 요소를 가져 와서 프로젝트에서 사용할 수 있습니다..

10. 네이티브 종이 반응

반응하는

또 다른 무료 오픈 소스 라이브러리는 React Native Paper입니다. 주요 구성 요소가 모두 있으며이 구성 요소는 Google의 머티리얼 디자인 표준을 준수하도록 설계되었습니다..

종이는 크로스 플랫폼이며 웹과 모바일 모두에서 작동합니다. 거의 모든 사용 사례 시나리오에 적합한 구성 요소 및 상호 작용이 있습니다. 애니메이션, 접근성 및 UI 로직을 포함한 대부분의 세부 사항이 처리됩니다. 기본 색상을 사용자 정의하거나 직접 만들 수 있습니다. 또한, 전체 테마 지원과 어두운 모드와 밝은 모드 사이를 전환하는 옵션이 있습니다. 의 위에 깃 허브, 그것은 4,000+ 별을 쌓아.

11. 기본 재료 키트 반응

반응 네이티브 재료 키트

다음으로 React Native 컴포넌트 라이브러리 목록에서 머티리얼 디자인을 React Native에 가져 오는 또 다른 UI 컴포넌트 세트가 있습니다. 내부에는 버튼, 카드, 범위 슬라이더 및 텍스트 필드가 있습니다. 또한 스피너 및 진행률 표시 줄에로드, 디스플레이, 라디오 버튼 및 확인란의 토글을 표시합니다..

머티리얼 디자인 라이트 기본 테마를 준수하는 사전 정의 된 빌더를 사용하여 버튼을 추가하는 코드 몇 줄만 있으면됩니다. 빌더를 사용하여 처음부터 사용자 정의 된 단추를 작성할 수도 있습니다. 내장 텍스트 필드의 경우도 마찬가지입니다. 뿐만 아니라 전역 테마를 변경하여 스타일을 사용자 지정할 수 있습니다. 이것은 전체 앱의 모든 확인란과 라디오 버튼에 영향을 미칩니다. 의 위에 깃 허브, 이 도서관에는 별 4,700 개가 있습니다.

12. 기본 재질 UI 반응

반응 네이티브 소재 UI

React Native Material UI는 React Native에 약 20 개의 컴포넌트를 제공합니다. 구성 요소에는 작업 단추, 아바타, 하위 머리글, 서랍, 구분선, 도구 모음 등이 포함됩니다. 이 구성 요소는 사용자 정의가 가능하며 구성에 재료 설계를 사용합니다. 테마에 대한 사용자 정의는 사용자가 직접 빌드 한 것을 포함하여 다른 구성 요소로 확장 될 수 있습니다. 필요한 경우 스타일을 재정 의하여 로컬 변경을 수행 할 수 있습니다..

React Native Vector Icons를 이미 사용하고 있다면 설치 방법이별로 없습니다. 그렇지 않으면 다운로드해야합니다. 안드로이드 소재 아이콘 그리고 당신이 가지고 있는지 확인하십시오 로보 토 iOS 용. 이 라이브러리는 3,000 개 이상의 별을 받았습니다 깃 허브.

13. RNUILIB

rnuilib

이 키트에 60 개 이상의 구성 요소가있는 RNUILIB는 거의 2,000 개의 별을 측정합니다. 깃 허브. 모든 구성 요소에 대한 라이브 예제가 포함되어 있으므로 프로젝트에서 사용하기 전에 사용 가능한 옵션을 확인할 수 있습니다.

구성 요소 중 일부는 애니메이션 이미지, 진행률을 나타내는 스캐너, 프로필 이미지를 표시하는 아바타, 기본 단추 및 그라디언트 슬라이더 구성 요소입니다..

14. 나쵸 UI

나쵸 UI

JavaScript 또는 React Native 프로젝트와 함께 사용할 수있는 30 개 이상의 기성품 구성 요소를 갖춘 Nachos UI는 1,900 개 이상의 별을 획득했습니다. 깃 허브. 실제로 도움이되는 것은 구성 요소 스타일링에 대해 너무 걱정할 필요가 없다는 것입니다. 한 구성 요소에서 다른 구성 요소로 사전 스타일 입력을 가져 오기만하면됩니다. Nachos UI 키트를 설치 한 후 원하는 구성 요소를 선택하고 해당 React Native 코드를 가져온 다음 프로젝트에 맞게 사용자 정의하십시오..

이 무료 오픈 소스 및 커뮤니티 기반 소프트웨어는 완전한 기능을 갖춘 도구 인 Avocode를 사용하여 Photoshop 및 Sketch 디자인을 공유하고 검사합니다. 덕분에 웹용 네이티브 반응, 웹 기반 프로젝트에도 사용할 수 있습니다.

15. 샤 우템

외침

Shoutem은 워드 프레스에 플러그인이있는 웹 사이트를 구축하는 것과 같은 확장 또는 모듈 식 빌딩 블록을 사용하여 작동하는 앱 구축 플랫폼입니다. 40 개 이상의 모든 기능을 갖춘 확장 프로그램으로 450 개 이상의 별을 모았습니다. 깃 허브. 확장 프로그램에는 사진 및 비디오 용 갤러리, 제품, 이벤트, 레스토랑 메뉴 등이 포함됩니다. 앱에서 이러한 오픈 소스 확장 프로그램을 자유롭게 사용할 수 있습니다. 그리고 간단히 포크하여 원하는 방식으로 수정할 수 있습니다.

Shoutem은 분석, 사용자 인증, 레이아웃, 푸시 알림 등과 같은 많은 모바일 백엔드 서비스를 제공합니다. 또한 사용하고 사용자 정의 할 수있는 잘 코딩 된 테마가 많이 있습니다. Shoutem은 100 % JavaScript와 React Native를 사용합니다.

이것이 최고의 React Native 컴포넌트 라이브러리 목록입니다. 어느 것이 당신의 선택입니까? 의견에 공유.

다음 기사에 관심이있을 수도 있습니다.

  • 앱 개발을위한 무료 리 액트 네이티브 템플릿

WordPress 사이트 속도를 높이기위한 충돌 과정에 참여하는 것을 잊지 마십시오. 몇 가지 간단한 수정으로로드 시간을 50-80 % 줄일 수 있습니다.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map