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

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，歡迎一起交流學習~