摘要:如果你想减少包大小,你可以这样引入事实上,每个组件都是支持多带带安装的,我们也推荐你使用这种方式引入组件。以下是运行示例后各界面的截图组件图标右上角的圆形徽标数字。
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 = () =>2.2 按需加载;
上述的方法将会把所有的组件打进bundle内,即使你没有用到所有的组件。如果你想减少包大小,你可以这样引入:
npm install @rn-components-kit/badge --save
import React from "react"; import {Badge} from " @rn-components-kit/badge"; const TestComponent = () =>;
事实上,每个组件都是支持多带带安装的,我们也推荐你使用这种方式引入组件。
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 |
按钮组件,支持以下特性:
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 |
轮播组件,就像"旋转木马"一样。支持以下特性:
水平/垂直两个方向
循环模式
自动播放模式
居中模式,当前项会被调整至一屏的中间,同时前一项/后一项也会露出一部分
支持轮播内容不足一屏的长度
注意
当使用水平模式时,width和itemWidth必须设置。
当使用垂直模式时,height和itemHeight必须设置。
如果轮播组件内容的数据源(数组)是会变化的,需要设置数据源作为data属性,不然轮播组件中的内容将不会更新。
下面的图片将有助于理解一些样式上的重要变量含义:
npm install @rn-components-kit/carousel --save
详细API请查看文档
组件示例预览效果 | 代码 |
---|---|
Demo1 | |
Demo2 | |
Demo3 | |
Demo4 | |
Demo5 | |
Demo6 | |
Demo7 |
复选框组件。
npm install @rn-components-kit/checkbox --save
详细API请查看文档
组件示例预览效果 | 代码 |
---|---|
Demo1 | |
Demo2 | |
Demo3 | |
Demo4 |
DeckSwiper让你一次评估一个选项,而不是从一组选项中进行选择。
npm install @rn-components-kit/deck-swiper --save
详细API请查看文档
组件示例预览效果 | 代码 |
---|---|
Demo1 |
分割线组件,支持两种方向: horizontal 和 vertical.
npm install @rn-components-kit/divider --save
详细API请查看文档
组件示例预览效果 | 代码 |
---|---|
Demo1 | |
Demo2 |
语义化的矢量图形。支持以下特性:
自定义大小
自定义颜色
内置集成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 |
进度条组件,展示当前操作进度,支持以下特性:
line和circle两种类型
normal,active,success和fail四种状态
自定义颜色,支持线性渐变(目前仅限line类型)
自定义进度文案格式,甚至支持信息展示区域完全自定义
注意
由于本组件支持线性渐变选项,所以你的项目需要集成react-native-linear-gradient。如果你的项目还没集成,你可以参照这里的指示完成。
npm install @rn-components-kit/progress --save
详细API请查看文档
组件示例预览效果 | 代码 |
---|---|
Demo1 | |
Demo2 | |
Demo3 | |
Demo4 | |
Demo5 |
Radio组件让用户从一堆选项中选择一项,支持以下特性:
禁用点击
自定义选中/未选中icon或图片
状态切换时有过渡动画
npm install @rn-components-kit/radio --save
详细API请查看文档
组件示例预览效果 | 代码 |
---|---|
Demo1 | |
Demo2 | |
Demo3 | |
Demo4 |
评分组件,支持以下特性:
支持点选和滑动操作进行评分
自定义图标样式(包括类型,颜色,大小)
支持不同的滑动步长(例如:0.1/0.2/0.5/1)
npm install @rn-components-kit/rating --save
详细API请查看文档
组件示例预览效果 | 代码 |
---|---|
Demo1 | |
Demo2 | |
Demo3 |
滚动选择器,支持以下特性:
抹平Android和iOS平台的交互差异
支持多项选择器
支持级联选择
ScrollPicker.Item支持自定义选项内容
npm install @rn-components-kit/scroll-picker --save
详细API请查看文档
组件示例预览效果 | 代码 |
---|---|
Demo1 | |
Demo2 | |
Demo3 |
骨架屏,常在loading时起占位的作用,支持以下特性:
avatar,title,paragraph 三部分均支持定制化
可以使用高阶组件withSkeleton完全定制化骨架屏的组成和样式
注意
当你使用装饰器的语法使用高阶组件withSkeleton时,确保你的项目安装了插件@babel/plugin-proposal-decorators.
npm install @rn-components-kit/skeleton --save
详细API请查看文档
组件示例预览效果 | 代码 |
---|---|
Demo1 | |
Demo2 |
以滑动的交互形式,从指定范围内选择值。支持以下特性:
水平或垂直两种方向
1或2个滑块
滑块和轨道样式高度可定制化
tip文案可定制化
npm install @rn-components-kit/slider --save
详细API请查看文档
组件示例预览效果 | 代码 |
---|---|
Demo1 | |
Demo2 | |
Demo3 | |
Demo4 |
用于展示页面或区块的加载中状态。支持以下7种不同动画类型:
Ladder
Rainbow
Wave
RollingCubes
ChasingCircles
Pulse
FlippingCard
npm install @rn-components-kit/spin --save
详细API请查看文档
组件示例预览效果 | 代码 |
---|---|
Demo1 | |
Demo2 | |
Demo3 | |
Demo4 | |
Demo5 | |
Demo6 | |
Demo7 |
iOS样式的滑动隐藏按钮组件,支持以下特性:
支持左和右两个方向滑出
隐藏部分支持多个按钮配置
隐藏部分完全自定义
npm install @rn-components-kit/swipe-out --save
详细API请查看文档
组件示例预览效果 | 代码 |
---|---|
Demo1 | |
Demo2 | |
Demo3 |
开关选择器,支持以下特性:
自定义颜色
自定义大小
两种风格: cupertino和material
npm install @rn-components-kit/switch --save
详细API请查看文档
组件示例预览效果 | 代码 |
---|---|
Demo1 | |
Demo2 | |
Demo3 | |
Demo4 | |
Demo5 |
进行标记和分类的小标签。支持以下特性:
自定义颜色
支持两种风格:outline和solid
可关闭及其关闭事件回调函数
npm install @rn-components-kit/tag --save
详细API请查看文档
组件示例预览效果 | 代码 |
---|---|
Demo1 | |
Demo2 | |
Demo3 |
当用户点击某个元素,展示一个气泡框,支持以下特性:
气泡框支持top和bottom两个方向
完全自定义气泡框内容
npm install @rn-components-kit/tooltip --save
详细API请查看文档
组件示例预览效果 | 代码 |
---|---|
Demo1 |
最后再次放上仓库地址,欢迎star,欢迎提issue,欢迎提PR~
你也可以关注我的Blog,欢迎一起交流学习~
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/106781.html
showImg(https://segmentfault.com/img/remote/1460000018808058?w=900&h=500); 简介 SEO、sitemap、搜索引擎优化、简单教程 在暧昧期和暗恋期时心里总是悬挂着: ta 为什么还不和我表白? ta 是不是对我没感觉? ta 是不是只是把我当备胎? ta 是不是对谁都这样? 解决问题最简单的方式就是直接 问问对方...
摘要:最近双十一过后,每天不是拿快递就是去拿快递的路上,翻开手机应用里的菜鸟裹裹查看快递是很方便的,当我在微信端搜索菜鸟裹裹小程序时,却没有发现,于是便想自己动手仿版写一个菜鸟裹裹的小程序,对其中的快递查询物流跟踪很有兴趣。 新手写小程序并不简单,这是我的第一次尝试学习到了很多。最近双十一过后,每天不是拿快递就是去拿快递的路上,翻开手机应用里的菜鸟裹裹查看快递是很方便的,当我在微信端搜索菜鸟...
摘要:最近双十一过后,每天不是拿快递就是去拿快递的路上,翻开手机应用里的菜鸟裹裹查看快递是很方便的,当我在微信端搜索菜鸟裹裹小程序时,却没有发现,于是便想自己动手仿版写一个菜鸟裹裹的小程序,对其中的快递查询物流跟踪很有兴趣。 新手写小程序并不简单,这是我的第一次尝试学习到了很多。最近双十一过后,每天不是拿快递就是去拿快递的路上,翻开手机应用里的菜鸟裹裹查看快递是很方便的,当我在微信端搜索菜鸟...
摘要:最近双十一过后,每天不是拿快递就是去拿快递的路上,翻开手机应用里的菜鸟裹裹查看快递是很方便的,当我在微信端搜索菜鸟裹裹小程序时,却没有发现,于是便想自己动手仿版写一个菜鸟裹裹的小程序,对其中的快递查询物流跟踪很有兴趣。 新手写小程序并不简单,这是我的第一次尝试学习到了很多。最近双十一过后,每天不是拿快递就是去拿快递的路上,翻开手机应用里的菜鸟裹裹查看快递是很方便的,当我在微信端搜索菜鸟...
阅读 3043·2021-11-23 09:51
阅读 1025·2021-09-02 15:21
阅读 2989·2019-08-30 13:56
阅读 1813·2019-08-29 14:12
阅读 690·2019-08-29 13:53
阅读 1630·2019-08-29 11:32
阅读 1286·2019-08-29 11:25
阅读 1474·2019-08-28 17:51