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

1. 前言

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

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

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

下面就讓咱們來認識一下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 按需加載

上述的方法將會把全部的組件打進bundle內，即便你沒有用到全部的組件。若是你想減小包大小，你能夠這樣引入：

npm install @rn-components-kit/badge --save
複製代碼

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

const TestComponent = () => <Badge/>;
複製代碼

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

2.3 運行示例

咱們建立了一個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

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

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

npm install @rn-components-kit/badge --save
複製代碼

詳細API請查看文檔

組件示例預覽效果	代碼
	Demo1 Code
	Demo2 Code
	Demo3 Code
	Demo4 Code

3.2 Button

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

• default，primary，success，warning和danger5種主題
• small，default和large3種大小
• square，default和round3種形狀
• 支持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

3.3 Carousel

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

• 水平/垂直兩個方向
• 循環模式
• 自動播放模式
• 居中模式，當前項會被調整至一屏的中間，同時前一項/後一項也會露出一部分
• 支持輪播內容不足一屏的長度

注意

1. 當使用水平模式時，width和itemWidth必須設置。
2. 當使用垂直模式時，height和itemHeight必須設置。
3. 若是輪播組件內容的數據源（數組）是會變化的，須要設置數據源做爲data屬性，否則輪播組件中的內容將不會更新。
4. 下面的圖片將有助於理解一些樣式上的重要變量含義：

npm install @rn-components-kit/carousel --save
複製代碼

詳細API請查看文檔

組件示例預覽效果	代碼
	Demo1 Code
	Demo2 Code
	Demo3 Code
	Demo4 Code
	Demo5 Code
	Demo6 Code
	Demo7 Code

3.4 CheckBox

複選框組件。

npm install @rn-components-kit/checkbox --save
複製代碼

詳細API請查看文檔

組件示例預覽效果	代碼
	Demo1 Code
	Demo2 Code
	Demo3 Code
	Demo4 Code

3.5 DeckSwiper

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

npm install @rn-components-kit/deck-swiper --save
複製代碼

詳細API請查看文檔

組件示例預覽效果	代碼
	Demo1 Code

3.6 Divider

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

npm install @rn-components-kit/divider --save
複製代碼

詳細API請查看文檔

組件示例預覽效果	代碼
	Demo1 Code
	Demo2 Code

3.7 Icon

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

• 自定義大小
• 自定義顏色
• 內置集成Ant-Design Preset

注意：確保你的項目已經集成了ART模塊

若是你遇到諸如No component found for view with name "ARTXXX"之類的報錯，那是由於你的項目尚未集成ART模塊。你須要：

1. 使用Xcode打開項目下的ios工程，Libraries -> Add Files to -> node_modules/react-native/Libraries/ART/ART.xcodeproj。
2. 點擊項目根目錄，找到Linked Frameworks and Libraries，點擊+選擇libART.a，而後從新編譯工程。
3. 從新編譯完成後，從新運行命令react-native run-ios/android，重啓項目。

npm install @rn-components-kit/icon --save
複製代碼

詳細API請查看文檔

組件示例預覽效果	代碼
	Demo1 Code
	Demo2 Code
	Demo3 Code

3.8 Progress

進度條組件，展現當前操做進度，支持如下特性：

• 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

3.9 Radio

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

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

npm install @rn-components-kit/radio --save
複製代碼

詳細API請查看文檔

組件示例預覽效果	代碼
	Demo1 Code
	Demo2 Code
	Demo3 Code
	Demo4 Code

3.10 Rating

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

• 支持點選和滑動操做進行評分
• 自定義圖標樣式（包括類型，顏色，大小）
• 支持不一樣的滑動步長（例如：0.1/0.2/0.5/1）

npm install @rn-components-kit/rating --save
複製代碼

詳細API請查看文檔

組件示例預覽效果	代碼
	Demo1 Code
	Demo2 Code
	Demo3 Code

3.11 ScrollPicker

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

• 抹平Android和iOS平臺的交互差別
• 支持多項選擇器
• 支持級聯選擇
• ScrollPicker.Item支持自定義選項內容

npm install @rn-components-kit/scroll-picker --save
複製代碼

詳細API請查看文檔

組件示例預覽效果	代碼
	Demo1 Code
	Demo2 Code
	Demo3 Code

3.12 Skeleton

骨架屏，常在loading時起佔位的做用，支持如下特性：

• avatar，title，paragraph 三部分均支持定製化
• 能夠使用高階組件withSkeleton徹底定製化骨架屏的組成和樣式

注意

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

npm install @rn-components-kit/skeleton --save
複製代碼

詳細API請查看文檔

組件示例預覽效果	代碼
	Demo1 Code
	Demo2 Code

3.13 Slider

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

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

npm install @rn-components-kit/slider --save
複製代碼

詳細API請查看文檔

組件示例預覽效果	代碼
	Demo1 Code
	Demo2 Code
	Demo3 Code
	Demo4 Code

3.14 Spin

用於展現頁面或區塊的加載中狀態。支持如下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

3.15 SwipeOut

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

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

npm install @rn-components-kit/swipe-out --save
複製代碼

詳細API請查看文檔

組件示例預覽效果	代碼
	Demo1 Code
	Demo2 Code
	Demo3 Code

3.16 Switch

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

• 自定義顏色
• 自定義大小
• 兩種風格: cupertino和material

npm install @rn-components-kit/switch --save
複製代碼

詳細API請查看文檔

組件示例預覽效果	代碼
	Demo1 Code
	Demo2 Code
	Demo3 Code
	Demo4 Code
	Demo5 Code

3.17 Tag

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

• 自定義顏色
• 支持兩種風格：outline和solid
• 可關閉及其關閉事件回調函數

npm install @rn-components-kit/tag --save
複製代碼

詳細API請查看文檔

組件示例預覽效果	代碼
	Demo1 Code
	Demo2 Code
	Demo3 Code

3.18 Tooltip

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

• 氣泡框支持top和bottom兩個方向
• 徹底自定義氣泡框內容

npm install @rn-components-kit/tooltip --save
複製代碼

詳細API請查看文檔

組件示例預覽效果	代碼
	Demo1 Code

4. 寫在最後

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

你也能夠關注個人Blog，歡迎一塊兒交流學習~