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 --saveimport React from 'react';
import {Badge} from ' @rn-components-kit/badge';
const TestComponent = () => <Badge/>;2.2 按需加载
上述的方法将会把所有的组件打进bundle内，即使你没有用到所有的组件。如果你想减少包大小，你可以这样引入：
npm install @rn-components-kit/badge --saveimport 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 |
 |
Demo2 |
 |
Demo3 |
 |
Demo4 |
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 |
 |
Demo2 |
 |
Demo3 |
 |
Demo4 |
 |
Demo5 |
 |
Demo6 |
 |
Demo7 |
3.3 Carousel
轮播组件，就像"旋转木马"一样。支持以下特性：
- 水平/垂直两个方向
- 循环模式
- 自动播放模式
- 居中模式，当前项会被调整至一屏的中间，同时前一项/后一项也会露出一部分
- 支持轮播内容不足一屏的长度
注意
- 当使用
水平模式时，width和itemWidth必须设置。 - 当使用
垂直模式时，height和itemHeight必须设置。 - 如果轮播组件内容的数据源（数组）是会变化的，需要设置数据源作为
data属性，不然轮播组件中的内容将不会更新。 - 下面的图片将有助于理解一些样式上的重要变量含义：
npm install @rn-components-kit/carousel --save详细API请查看文档
| 组件示例预览效果 | 代码 |
|---|---|
 |
Demo1 |
 |
Demo2 |
 |
Demo3 |
 |
Demo4 |
 |
Demo5 |
 |
Demo6 |
 |
Demo7 |
3.4 CheckBox
复选框组件。
npm install @rn-components-kit/checkbox --save详细API请查看文档
| 组件示例预览效果 | 代码 |
|---|---|
 |
Demo1 |
 |
Demo2 |
 |
Demo3 |
 |
Demo4 |
3.5 DeckSwiper
DeckSwiper让你一次评估一个选项，而不是从一组选项中进行选择。
npm install @rn-components-kit/deck-swiper --save详细API请查看文档
| 组件示例预览效果 | 代码 |
|---|---|
 |
Demo1 |
3.6 Divider
分割线组件，支持两种方向: horizontal 和 vertical.
npm install @rn-components-kit/divider --save详细API请查看文档
| 组件示例预览效果 | 代码 |
|---|---|
 |
Demo1 |
 |
Demo2 |
3.7 Icon
语义化的矢量图形。支持以下特性:
- 自定义大小
- 自定义颜色
- 内置集成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请查看文档
| 组件示例预览效果 | 代码 |
|---|---|
 |
Demo1 |
 |
Demo2 |
 |
Demo3 |
3.8 Progress
进度条组件，展示当前操作进度，支持以下特性：
-
line和circle两种类型 -
normal，active，success和fail四种状态 - 自定义颜色，支持线性渐变（目前仅限
line类型） - 自定义进度文案格式，甚至支持信息展示区域完全自定义
注意
由于本组件支持线性渐变选项，所以你的项目需要集成react-native-linear-gradient。如果你的项目还没集成，你可以参照这里的指示完成。
npm install @rn-components-kit/progress --save详细API请查看文档
| 组件示例预览效果 | 代码 |
|---|---|
 |
Demo1 |
 |
Demo2 |
 |
Demo3 |
 |
Demo4 |
 |
Demo5 |
3.9 Radio
Radio组件让用户从一堆选项中选择一项，支持以下特性：
- 禁用点击
- 自定义选中/未选中icon或图片
- 状态切换时有过渡动画
npm install @rn-components-kit/radio --save详细API请查看文档
| 组件示例预览效果 | 代码 |
|---|---|
 |
Demo1 |
 |
Demo2 |
 |
Demo3 |
 |
Demo4 |
3.10 Rating
评分组件，支持以下特性：
- 支持
点选和滑动操作进行评分 - 自定义图标样式（包括
类型，颜色，大小） - 支持不同的滑动步长（例如：0.1/0.2/0.5/1）
npm install @rn-components-kit/rating --save详细API请查看文档
| 组件示例预览效果 | 代码 |
|---|---|
 |
Demo1 |
 |
Demo2 |
 |
Demo3 |
3.11 ScrollPicker
滚动选择器，支持以下特性：
- 抹平
Android和iOS平台的交互差异 - 支持多项选择器
- 支持级联选择
-
ScrollPicker.Item支持自定义选项内容
npm install @rn-components-kit/scroll-picker --save详细API请查看文档
| 组件示例预览效果 | 代码 |
|---|---|
 |
Demo1 |
 |
Demo2 |
 |
Demo3 |
3.12 Skeleton
骨架屏，常在loading时起占位的作用，支持以下特性：
-
avatar，title，paragraph三部分均支持定制化 - 可以使用高阶组件
withSkeleton完全定制化骨架屏的组成和样式
注意
当你使用装饰器的语法使用高阶组件withSkeleton时，确保你的项目安装了插件@babel/plugin-proposal-decorators.
npm install @rn-components-kit/skeleton --save详细API请查看文档
| 组件示例预览效果 | 代码 |
|---|---|
 |
Demo1 |
 |
Demo2 |
3.13 Slider
以滑动的交互形式，从指定范围内选择值。支持以下特性：
-
水平或垂直两种方向 -
1或2个滑块 - 滑块和轨道样式高度可定制化
- tip文案可定制化
npm install @rn-components-kit/slider --save详细API请查看文档
| 组件示例预览效果 | 代码 |
|---|---|
 |
Demo1 |
 |
Demo2 |
 |
Demo3 |
 |
Demo4 |
3.14 Spin
用于展示页面或区块的加载中状态。支持以下7种不同动画类型：
LadderRainbowWaveRollingCubesChasingCirclesPulseFlippingCard
npm install @rn-components-kit/spin --save详细API请查看文档
| 组件示例预览效果 | 代码 |
|---|---|
 |
Demo1 |
 |
Demo2 |
 |
Demo3 |
 |
Demo4 |
 |
Demo5 |
 |
Demo6 |
 |
Demo7 |
3.15 SwipeOut
iOS样式的滑动隐藏按钮组件，支持以下特性：
- 支持
左和右两个方向滑出 - 隐藏部分支持多个按钮配置
- 隐藏部分完全自定义
npm install @rn-components-kit/swipe-out --save详细API请查看文档
| 组件示例预览效果 | 代码 |
|---|---|
 |
Demo1 |
 |
Demo2 |
 |
Demo3 |
3.16 Switch
开关选择器，支持以下特性:
- 自定义颜色
- 自定义大小
- 两种风格:
cupertino和material
npm install @rn-components-kit/switch --save详细API请查看文档
| 组件示例预览效果 | 代码 |
|---|---|
 |
Demo1 |
 |
Demo2 |
 |
Demo3 |
 |
Demo4 |
 |
Demo5 |
3.17 Tag
进行标记和分类的小标签。支持以下特性：
- 自定义颜色
- 支持两种风格：
outline和solid - 可关闭及其关闭事件回调函数
npm install @rn-components-kit/tag --save详细API请查看文档
| 组件示例预览效果 | 代码 |
|---|---|
 |
Demo1 |
 |
Demo2 |
 |
Demo3 |
3.18 Tooltip
当用户点击某个元素，展示一个气泡框，支持以下特性：
- 气泡框支持
top和bottom两个方向 - 完全自定义气泡框内容
npm install @rn-components-kit/tooltip --save详细API请查看文档
| 组件示例预览效果 | 代码 |
|---|---|
 |
Demo1 |
4. 写在最后
最后再次放上仓库地址，欢迎star，欢迎提issue，欢迎提PR~
你也可以关注我的Blog，欢迎一起交流学习~
