摘要：如果你想減少包大小，你可以這樣引入事實上，每個組件都是支持多帶帶安裝的，我們也推薦你使用這種方式引入組件。以下是運行示例后各界面的截圖組件圖標(biāo)右上角的圓形徽標(biāo)數(shù)字。

一直以來都想做個組件庫，一方面是對工作中常遇問題的總結(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~

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

npm install rn-components-kit --save

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

const TestComponent = () => ;

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

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

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

const TestComponent = () => ;

事實上，每個組件都是支持多帶帶安裝的，我們也推薦你使用這種方式引入組件。

我們創(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后各界面的截圖：

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

純圓點和帶文字圓點兩種樣式

自定義顏色

友好的過渡動畫

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

詳細API請查看文檔

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

default，primary，success，warning和danger5種主題

small，default和large3種大小

square，default和round3種形狀

支持icon按鈕和控制圖標(biāo)位置

支持outline樣式按鈕

支持block樣式按鈕

支持link樣式按鈕

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

詳細API請查看文檔

輪播組件，就像"旋轉(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

詳細API請查看文檔

復(fù)選框組件。

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

詳細API請查看文檔

DeckSwiper讓你一次評估一個選項，而不是從一組選項中進行選擇。

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

詳細API請查看文檔

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

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

詳細API請查看文檔

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

自定義大小

自定義顏色

內(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

詳細API請查看文檔

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

line和circle兩種類型

normal，active，success和fail四種狀態(tài)

自定義顏色，支持線性漸變（目前僅限line類型）

自定義進度文案格式，甚至支持信息展示區(qū)域完全自定義

注意

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

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

詳細API請查看文檔

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

禁用點擊

自定義選中/未選中icon或圖片

狀態(tài)切換時有過渡動畫

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

詳細API請查看文檔

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

支持點選和滑動操作進行評分

自定義圖標(biāo)樣式（包括類型，顏色，大小）

支持不同的滑動步長（例如：0.1/0.2/0.5/1）

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

詳細API請查看文檔

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

抹平Android和iOS平臺的交互差異

支持多項選擇器

支持級聯(lián)選擇

ScrollPicker.Item支持自定義選項內(nèi)容

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

詳細API請查看文檔

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

avatar，title，paragraph 三部分均支持定制化

可以使用高階組件withSkeleton完全定制化骨架屏的組成和樣式

注意

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

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

詳細API請查看文檔

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

水平或垂直兩種方向

1或2個滑塊

滑塊和軌道樣式高度可定制化

tip文案可定制化

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

詳細API請查看文檔

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

Ladder

Rainbow

Wave

RollingCubes

ChasingCircles

Pulse

FlippingCard

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

詳細API請查看文檔

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

支持左和右兩個方向滑出

隱藏部分支持多個按鈕配置

隱藏部分完全自定義

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

詳細API請查看文檔

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

自定義顏色

自定義大小

兩種風(fēng)格: cupertino和material

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

詳細API請查看文檔

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

自定義顏色

支持兩種風(fēng)格：outline和solid

可關(guān)閉及其關(guān)閉事件回調(diào)函數(shù)

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

詳細API請查看文檔

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

氣泡框支持top和bottom兩個方向

完全自定義氣泡框內(nèi)容

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

詳細API請查看文檔

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

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