小哥哥小姐姐看過來棵逊，這里有個組件庫需要您簽收一下

1. 前言

一直以來都想做個組件庫，一方面是對工作中常遇問題的總結(jié)侦铜，另一方面也確實能夠提升工作效率（誰又不想造一個屬于自己的輪子呢~）专甩，于是乎就有了本文的主角兒rn-components-kit。

市面上web的UI組件庫如此之多钉稍，react相關(guān)的有antd涤躲，vue相關(guān)的有element。不過贡未，今天介紹的是react-native的一個組件庫种樱。不同于上述組件庫都有統(tǒng)一的視覺規(guī)范，rn-components-kit更注重的是在提供組件基本能力的同時盡可能多地賦予自定義樣式的可能性俊卤。

放上倉庫地址嫩挤，歡迎star，歡迎提issue消恍，歡迎提PR~

下面就讓我們來認(rèn)識一下rn-components-kit~

2. 快速開始

2.1 安裝

你可以通過下面的命令安裝rn-components-kit:

npm install rn-components-kit --save

import React from 'react';
import {Badge} from ' @rn-components-kit/badge';

const TestComponent = () => <Badge/>;

2.2 按需加載

上述的方法將會把所有的組件打進(jìn)bundle內(nèi)岂昭，即使你沒有用到所有的組件。如果你想減少包大小哺哼，你可以這樣引入：

npm install @rn-components-kit/badge --save

import React from 'react';
import {Badge} from ' @rn-components-kit/badge';

const TestComponent = () => <Badge/>;

事實上佩抹，每個組件都是支持單獨安裝的，我們也推薦你使用這種方式引入組件取董。

2.3 運行示例

我們創(chuàng)建了一個app專門用來演示每個組件的使用方法以及運行效果，如果你想運行這個例子无宿，你需要先下載本倉庫到本地茵汰。

# 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后各界面的截圖：

3. 組件

3.1 Badge

圖標(biāo)右上角的圓形徽標(biāo)數(shù)字。支持以下特性：

純圓點和帶文字圓點兩種樣式
自定義顏色
友好的過渡動畫

npm install @rn-components-kit/badge --save

詳細(xì)API請查看文檔

組件示例預(yù)覽效果	代碼
	Demo1
	Demo2
	Demo3
	Demo4

3.2 Button

按鈕組件孽鸡，支持以下特性：

default蹂午，primary，success彬碱，warning和danger5種主題
small豆胸，default和large3種大小
square，default和round3種形狀
支持icon按鈕和控制圖標(biāo)位置
支持outline樣式按鈕
支持block樣式按鈕
支持link樣式按鈕

npm install @rn-components-kit/button --save

詳細(xì)API請查看文檔

組件示例預(yù)覽效果	代碼
	Demo1
	Demo2
	Demo3
	Demo4
	Demo5
	Demo6
	Demo7

3.3 Carousel

輪播組件巷疼，就像"旋轉(zhuǎn)木馬"一樣晚胡。支持以下特性：

水平/垂直兩個方向
循環(huán)模式
自動播放模式
居中模式，當(dāng)前項會被調(diào)整至一屏的中間，同時前一項/后一項也會露出一部分
支持輪播內(nèi)容不足一屏的長度

注意

當(dāng)使用水平模式時估盘，width和itemWidth必須設(shè)置瓷患。
當(dāng)使用垂直模式時，height和itemHeight必須設(shè)置遣妥。
如果輪播組件內(nèi)容的數(shù)據(jù)源（數(shù)組）是會變化的擅编，需要設(shè)置數(shù)據(jù)源作為data屬性，不然輪播組件中的內(nèi)容將不會更新箫踩。
下面的圖片將有助于理解一些樣式上的重要變量含義：

npm install @rn-components-kit/carousel --save

詳細(xì)API請查看文檔

組件示例預(yù)覽效果	代碼
	Demo1
	Demo2
	Demo3
	Demo4
	Demo5
	Demo6
	Demo7

3.4 CheckBox

復(fù)選框組件爱态。

npm install @rn-components-kit/checkbox --save

詳細(xì)API請查看文檔

組件示例預(yù)覽效果	代碼
	Demo1
	Demo2
	Demo3
	Demo4

3.5 DeckSwiper

DeckSwiper讓你一次評估一個選項，而不是從一組選項中進(jìn)行選擇境钟。

npm install @rn-components-kit/deck-swiper --save

詳細(xì)API請查看文檔

組件示例預(yù)覽效果	代碼
	Demo1

3.6 Divider

分割線組件肢藐，支持兩種方向: horizontal 和 vertical.

npm install @rn-components-kit/divider --save

詳細(xì)API請查看文檔

組件示例預(yù)覽效果	代碼
	Demo1
	Demo2

3.7 Icon

語義化的矢量圖形。支持以下特性:

自定義大小
自定義顏色
內(nèi)置集成Ant-Design Preset

注意：確保你的項目已經(jīng)集成了ART模塊

如果你遇到諸如No component found for view with name "ARTXXX"之類的報錯吱韭，那是因為你的項目還沒有集成ART模塊吆豹。你需要：

使用Xcode打開項目下的ios工程，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

詳細(xì)API請查看文檔

組件示例預(yù)覽效果	代碼
	Demo1
	Demo2
	Demo3

3.8 Progress

進(jìn)度條組件，展示當(dāng)前操作進(jìn)度环葵，支持以下特性：

line和circle兩種類型
normal调窍，active，success和fail四種狀態(tài)
自定義顏色张遭，支持線性漸變（目前僅限line類型）
自定義進(jìn)度文案格式邓萨，甚至支持信息展示區(qū)域完全自定義

注意

由于本組件支持線性漸變選項，所以你的項目需要集成react-native-linear-gradient菊卷。如果你的項目還沒集成缔恳，你可以參照這里的指示完成。

npm install @rn-components-kit/progress --save

詳細(xì)API請查看文檔

組件示例預(yù)覽效果	代碼
	Demo1
	Demo2
	Demo3
	Demo4
	Demo5

3.9 Radio

Radio組件讓用戶從一堆選項中選擇一項洁闰，支持以下特性：

禁用點擊
自定義選中/未選中icon或圖片
狀態(tài)切換時有過渡動畫

npm install @rn-components-kit/radio --save

詳細(xì)API請查看文檔

組件示例預(yù)覽效果	代碼
	Demo1
	Demo2
	Demo3
	Demo4

3.10 Rating

評分組件歉甚，支持以下特性：

支持點選和滑動操作進(jìn)行評分
自定義圖標(biāo)樣式（包括類型，顏色扑眉，大小）
支持不同的滑動步長（例如：0.1/0.2/0.5/1）

npm install @rn-components-kit/rating --save

詳細(xì)API請查看文檔

組件示例預(yù)覽效果	代碼
	Demo1
	Demo2
	Demo3

3.11 ScrollPicker

滾動選擇器纸泄，支持以下特性：

抹平Android和iOS平臺的交互差異
支持多項選擇器
支持級聯(lián)選擇
ScrollPicker.Item支持自定義選項內(nèi)容

npm install @rn-components-kit/scroll-picker --save

詳細(xì)API請查看文檔

組件示例預(yù)覽效果	代碼
	Demo1
	Demo2
	Demo3

3.12 Skeleton

骨架屏赖钞，常在loading時起占位的作用，支持以下特性：

avatar刃滓，title仁烹，paragraph 三部分均支持定制化
可以使用高階組件withSkeleton完全定制化骨架屏的組成和樣式

注意

當(dāng)你使用裝飾器的語法使用高階組件withSkeleton時，確保你的項目安裝了插件@babel/plugin-proposal-decorators.

npm install @rn-components-kit/skeleton --save

詳細(xì)API請查看文檔

組件示例預(yù)覽效果	代碼
	Demo1
	Demo2

3.13 Slider

以滑動的交互形式咧虎，從指定范圍內(nèi)選擇值卓缰。支持以下特性：

水平或垂直兩種方向
1或2個滑塊
滑塊和軌道樣式高度可定制化
tip文案可定制化

npm install @rn-components-kit/slider --save

詳細(xì)API請查看文檔

組件示例預(yù)覽效果	代碼
	Demo1
	Demo2
	Demo3
	Demo4

3.14 Spin

用于展示頁面或區(qū)塊的加載中狀態(tài)。支持以下7種不同動畫類型：

Ladder
Rainbow
Wave
RollingCubes
ChasingCircles
Pulse
FlippingCard

npm install @rn-components-kit/spin --save

詳細(xì)API請查看文檔

組件示例預(yù)覽效果	代碼
	Demo1
	Demo2
	Demo3
	Demo4
	Demo5
	Demo6
	Demo7

3.15 SwipeOut

iOS樣式的滑動隱藏按鈕組件砰诵，支持以下特性：

支持左和右兩個方向滑出
隱藏部分支持多個按鈕配置
隱藏部分完全自定義

npm install @rn-components-kit/swipe-out --save

詳細(xì)API請查看文檔

組件示例預(yù)覽效果	代碼
	Demo1
	Demo2
	Demo3

3.16 Switch

開關(guān)選擇器征唬，支持以下特性:

自定義顏色
自定義大小
兩種風(fēng)格: cupertino和material

npm install @rn-components-kit/switch --save

詳細(xì)API請查看文檔

組件示例預(yù)覽效果	代碼
	Demo1
	Demo2
	Demo3
	Demo4
	Demo5

3.17 Tag

進(jìn)行標(biāo)記和分類的小標(biāo)簽。支持以下特性：

自定義顏色
支持兩種風(fēng)格：outline和solid
可關(guān)閉及其關(guān)閉事件回調(diào)函數(shù)

npm install @rn-components-kit/tag --save

詳細(xì)API請查看文檔

組件示例預(yù)覽效果	代碼
	Demo1
	Demo2
	Demo3

3.18 Tooltip

當(dāng)用戶點擊某個元素茁彭，展示一個氣泡框总寒，支持以下特性：

氣泡框支持top和bottom兩個方向
完全自定義氣泡框內(nèi)容

npm install @rn-components-kit/tooltip --save

詳細(xì)API請查看文檔

組件示例預(yù)覽效果	代碼
	Demo1

4. 寫在最后

最后再次放上倉庫地址，歡迎star理肺，歡迎提issue摄闸，歡迎提PR~

你也可以關(guān)注我的Blog，歡迎一起交流學(xué)習(xí)~

小哥哥小姐姐看過來，這里有個組件庫需要您簽收一下

小哥哥小姐姐看過來凉袱，這里有個組件庫需要您簽收一下

1. 前言

2. 快速開始

2.1 安裝

2.2 按需加載

2.3 運行示例

3. 組件

3.1 Badge

3.2 Button

3.3 Carousel

3.4 CheckBox

3.5 DeckSwiper

3.6 Divider

3.7 Icon

3.8 Progress

3.9 Radio

3.10 Rating

3.11 ScrollPicker

3.12 Skeleton

3.13 Slider

3.14 Spin

3.15 SwipeOut

3.16 Switch

3.17 Tag

3.18 Tooltip

4. 寫在最后