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

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

市面上web的UI組件庫如此之多，react相關的有antd，vue相關的有element。不過，今天介紹的是react-native的一個組件庫。不同于上述組件庫都有統一的視覺規范，rn-components-kit更注重的是在提供組件基本能力的同時盡可能多地賦予自定義樣式的可能性。

放上倉庫地址，歡迎star，歡迎提issue，歡迎提PR~

下面就讓我們來認識一下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內，即使你沒有用到所有的組件。如果你想減少包大小，你可以這樣引入：

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

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

const TestComponent = () => ;

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

我們創建了一個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后各界面的截圖：

圖標右上角的圓形徽標數字。支持以下特性：

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

自定義顏色

友好的過渡動畫

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

詳細API請查看文檔

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

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

small，default和large3種大小

square，default和round3種形狀

支持icon按鈕和控制圖標位置

支持outline樣式按鈕

支持block樣式按鈕

支持link樣式按鈕

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

詳細API請查看文檔

輪播組件，就像"旋轉木馬"一樣。支持以下特性：

水平/垂直兩個方向

循環模式

自動播放模式

居中模式，當前項會被調整至一屏的中間，同時前一項/后一項也會露出一部分

支持輪播內容不足一屏的長度

注意

當使用水平模式時，width和itemWidth必須設置。

當使用垂直模式時，height和itemHeight必須設置。

如果輪播組件內容的數據源（數組）是會變化的，需要設置數據源作為data屬性，不然輪播組件中的內容將不會更新。

下面的圖片將有助于理解一些樣式上的重要變量含義：

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

詳細API請查看文檔

復選框組件。

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請查看文檔

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

自定義大小

自定義顏色

內置集成Ant-Design Preset

注意：確保你的項目已經集成了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請查看文檔

進度條組件，展示當前操作進度，支持以下特性：

line和circle兩種類型

normal，active，success和fail四種狀態

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

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

注意

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

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

詳細API請查看文檔

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

禁用點擊

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

狀態切換時有過渡動畫

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

詳細API請查看文檔

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

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

自定義圖標樣式（包括類型，顏色，大小）

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

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

詳細API請查看文檔

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

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

支持多項選擇器

支持級聯選擇

ScrollPicker.Item支持自定義選項內容

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

詳細API請查看文檔

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

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

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

注意

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

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

詳細API請查看文檔

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

水平或垂直兩種方向

1或2個滑塊

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

tip文案可定制化

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

詳細API請查看文檔

用于展示頁面或區塊的加載中狀態。支持以下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請查看文檔

開關選擇器，支持以下特性:

自定義顏色

自定義大小

兩種風格: cupertino和material

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

詳細API請查看文檔

進行標記和分類的小標簽。支持以下特性：

自定義顏色

支持兩種風格：outline和solid

可關閉及其關閉事件回調函數

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

詳細API請查看文檔

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

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

完全自定義氣泡框內容

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

詳細API請查看文檔

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

你也可以關注我的Blog，歡迎一起交流學習~