小哥哥小姐姐看过来，这里有个组件库须要您签收一下

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，欢迎一块儿交流学习~