共计 4426 个字符,预计需要花费 12 分钟才能阅读完成。
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 | |
Demo2 | |
Demo3 | |
Demo4 |
3.2 Button
按钮组件,支持以下特性:
-
default
,primary
,success
,warning
和danger
5 种主题 -
small
,default
和large
3 种大小 -
square
,default
和round
3 种形状 - 支持
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 种不同动画类型:
Ladder
Rainbow
Wave
RollingCubes
ChasingCircles
Pulse
FlippingCard
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,欢迎一起交流学习~