一直以來都想作個組件庫,一方面是對工做中常遇問題的總結,另外一方面也確實可以提高工做效率(誰又不想造一個屬於本身的輪子呢~),因而乎就有了本文的主角兒rn-components-kit
。vue
市面上web
的UI組件庫如此之多,react
相關的有antd
,vue
相關的有element
。不過,今天介紹的是react-native
的一個組件庫。不一樣於上述組件庫都有統一的視覺規範,rn-components-kit
更注重的是在提供組件基本能力的同時儘量多地賦予自定義樣式的可能性。node
放上倉庫地址,歡迎star
,歡迎提issue
,歡迎提PR
~react
下面就讓咱們來認識一下rn-components-kit
~android
你能夠經過下面的命令安裝rn-components-kit
:ios
npm install rn-components-kit --save
複製代碼
import React from 'react';
import {Badge} from ' @rn-components-kit/badge';
const TestComponent = () => <Badge/>;
複製代碼
上述的方法將會把全部的組件打進bundle
內,即便你沒有用到全部的組件。若是你想減小包大小,你能夠這樣引入:git
npm install @rn-components-kit/badge --save
複製代碼
import React from 'react';
import {Badge} from ' @rn-components-kit/badge';
const TestComponent = () => <Badge/>;
複製代碼
事實上,每一個組件都是支持單獨安裝的,咱們也推薦你使用這種方式引入組件。github
咱們建立了一個app
專門用來演示每一個組件的使用方法以及運行效果,你能夠點擊這裏查看示例代碼。若是你想運行這個例子,你須要先下載本倉庫到本地。web
# download repo
git clone https://github.com/SmallStoneSK/rn-components-kit.git
# install dependencies
npm install
# for iOS
react-native run-ios
# for android
react-native run-android
複製代碼
如下是運行示例app後各界面的截圖:npm
圖標右上角的圓形徽標數字。支持如下特性:react-native
npm install @rn-components-kit/badge --save
複製代碼
詳細API請查看文檔
組件示例預覽效果 | 代碼 |
---|---|
![]() |
Demo1 Code |
![]() |
Demo2 Code |
![]() |
Demo3 Code |
![]() |
Demo4 Code |
按鈕組件,支持如下特性:
default
,primary
,success
,warning
和danger
5種主題small
,default
和large
3種大小square
,default
和round
3種形狀icon
按鈕和控制圖標位置outline
樣式按鈕block
樣式按鈕link
樣式按鈕npm install @rn-components-kit/button --save
複製代碼
詳細API請查看文檔
組件示例預覽效果 | 代碼 |
---|---|
![]() |
Demo1 Code |
![]() |
Demo2 Code |
![]() |
Demo3 Code |
![]() |
Demo4 Code |
![]() |
Demo5 Code |
![]() |
Demo6 Code |
![]() |
Demo7 Code |
輪播組件,就像"旋轉木馬"同樣。支持如下特性:
注意
水平
模式時,width
和itemWidth
必須設置。垂直
模式時,height
和itemHeight
必須設置。data
屬性,否則輪播組件中的內容將不會更新。npm install @rn-components-kit/carousel --save
複製代碼
詳細API請查看文檔
組件示例預覽效果 | 代碼 |
---|---|
![]() |
Demo1 Code |
![]() |
Demo2 Code |
![]() |
Demo3 Code |
![]() |
Demo4 Code |
![]() |
Demo5 Code |
![]() |
Demo6 Code |
![]() |
Demo7 Code |
複選框組件。
npm install @rn-components-kit/checkbox --save
複製代碼
詳細API請查看文檔
組件示例預覽效果 | 代碼 |
---|---|
![]() |
Demo1 Code |
![]() |
Demo2 Code |
![]() |
Demo3 Code |
![]() |
Demo4 Code |
DeckSwiper讓你一次評估一個選項,而不是從一組選項中進行選擇。
npm install @rn-components-kit/deck-swiper --save
複製代碼
詳細API請查看文檔
組件示例預覽效果 | 代碼 |
---|---|
![]() |
Demo1 Code |
分割線組件,支持兩種方向: horizontal
和 vertical
.
npm install @rn-components-kit/divider --save
複製代碼
詳細API請查看文檔
組件示例預覽效果 | 代碼 |
---|---|
![]() |
Demo1 Code |
![]() |
Demo2 Code |
語義化的矢量圖形。支持如下特性:
注意:確保你的項目已經集成了ART模塊
若是你遇到諸如No component found for view with name "ARTXXX"
之類的報錯,那是由於你的項目尚未集成ART
模塊。你須要:
Libraries
-> Add Files to
-> node_modules/react-native/Libraries/ART/ART.xcodeproj
。Linked Frameworks and Libraries
,點擊+
選擇libART.a
,而後從新編譯工程。react-native run-ios/android
,重啓項目。npm install @rn-components-kit/icon --save
複製代碼
詳細API請查看文檔
組件示例預覽效果 | 代碼 |
---|---|
![]() |
Demo1 Code |
![]() |
Demo2 Code |
![]() |
Demo3 Code |
進度條組件,展現當前操做進度,支持如下特性:
line
和circle
兩種類型normal
,active
,success
和fail
四種狀態line
類型)注意
因爲本組件支持線性漸變選項,因此你的項目須要集成react-native-linear-gradient
。若是你的項目還沒集成,你能夠參照這裏的指示完成。
npm install @rn-components-kit/progress --save
複製代碼
詳細API請查看文檔
組件示例預覽效果 | 代碼 |
---|---|
![]() |
Demo1 Code |
![]() |
Demo2 Code |
![]() |
Demo3 Code |
![]() |
Demo4 Code |
![]() |
Demo5 Code |
Radio組件讓用戶從一堆選項中選擇一項,支持如下特性:
npm install @rn-components-kit/radio --save
複製代碼
詳細API請查看文檔
組件示例預覽效果 | 代碼 |
---|---|
![]() |
Demo1 Code |
![]() |
Demo2 Code |
![]() |
Demo3 Code |
![]() |
Demo4 Code |
評分組件,支持如下特性:
點選
和滑動
操做進行評分類型
,顏色
,大小
)npm install @rn-components-kit/rating --save
複製代碼
詳細API請查看文檔
組件示例預覽效果 | 代碼 |
---|---|
![]() |
Demo1 Code |
![]() |
Demo2 Code |
![]() |
Demo3 Code |
滾動選擇器,支持如下特性:
Android
和iOS
平臺的交互差別ScrollPicker.Item
支持自定義選項內容npm install @rn-components-kit/scroll-picker --save
複製代碼
詳細API請查看文檔
組件示例預覽效果 | 代碼 |
---|---|
![]() |
Demo1 Code |
![]() |
Demo2 Code |
![]() |
Demo3 Code |
骨架屏,常在loading
時起佔位的做用,支持如下特性:
avatar
,title
,paragraph
三部分均支持定製化withSkeleton
徹底定製化骨架屏的組成和樣式注意
當你使用裝飾器
的語法使用高階組件withSkeleton
時,確保你的項目安裝了插件@babel/plugin-proposal-decorators
.
npm install @rn-components-kit/skeleton --save
複製代碼
詳細API請查看文檔
組件示例預覽效果 | 代碼 |
---|---|
![]() |
Demo1 Code |
![]() |
Demo2 Code |
以滑動的交互形式,從指定範圍內選擇值。支持如下特性:
水平
或垂直
兩種方向1
或2
個滑塊npm install @rn-components-kit/slider --save
複製代碼
詳細API請查看文檔
組件示例預覽效果 | 代碼 |
---|---|
![]() |
Demo1 Code |
![]() |
Demo2 Code |
![]() |
Demo3 Code |
![]() |
Demo4 Code |
用於展現頁面或區塊的加載中狀態。支持如下7種不一樣動畫類型:
Ladder
Rainbow
Wave
RollingCubes
ChasingCircles
Pulse
FlippingCard
npm install @rn-components-kit/spin --save
複製代碼
詳細API請查看文檔
組件示例預覽效果 | 代碼 |
---|---|
![]() |
Demo1 Code |
![]() |
Demo2 Code |
![]() |
Demo3 Code |
![]() |
Demo4 Code |
![]() |
Demo5 Code |
![]() |
Demo6 Code |
![]() |
Demo7 Code |
iOS樣式的滑動隱藏按鈕組件,支持如下特性:
左
和右
兩個方向滑出npm install @rn-components-kit/swipe-out --save
複製代碼
詳細API請查看文檔
組件示例預覽效果 | 代碼 |
---|---|
![]() |
Demo1 Code |
![]() |
Demo2 Code |
![]() |
Demo3 Code |
開關選擇器,支持如下特性:
cupertino
和material
npm install @rn-components-kit/switch --save
複製代碼
詳細API請查看文檔
組件示例預覽效果 | 代碼 |
---|---|
![]() |
Demo1 Code |
![]() |
Demo2 Code |
![]() |
Demo3 Code |
![]() |
Demo4 Code |
![]() |
Demo5 Code |
進行標記和分類的小標籤。支持如下特性:
outline
和solid
npm install @rn-components-kit/tag --save
複製代碼
詳細API請查看文檔
組件示例預覽效果 | 代碼 |
---|---|
![]() |
Demo1 Code |
![]() |
Demo2 Code |
![]() |
Demo3 Code |
當用戶點擊某個元素,展現一個氣泡框,支持如下特性:
top
和bottom
兩個方向npm install @rn-components-kit/tooltip --save
複製代碼
詳細API請查看文檔
組件示例預覽效果 | 代碼 |
---|---|
![]() |
Demo1 Code |
最後再次放上倉庫地址,歡迎star
,歡迎提issue
,歡迎提PR
~
你也能夠關注個人Blog,歡迎一塊兒交流學習~