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

2019-08-15 admin

1. 前言

一直以来都想做个组件库,一方面是对工作中常遇问题的总结,另一方面也确实能够提升工作效率(谁又不想造一个属于自己的轮子呢~),于是乎就有了本文的主角儿rn-components-kit

市面上web的UI组件库如此之多,react相关的有antdvue相关的有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请查看文档

3.2 Button

按钮组件,支持以下特性:

  • defaultprimarysuccesswarningdanger5种主题
  • smalldefaultlarge3种大小
  • squaredefaultround3种形状
  • 支持icon按钮和控制图标位置
  • 支持outline样式按钮
  • 支持block样式按钮
  • 支持link样式按钮
npm install @rn-components-kit/button --save

详细API请查看文档

3.3 Carousel

轮播组件,就像"旋转木马"一样。支持以下特性:

  • 水平/垂直两个方向
  • 循环模式
  • 自动播放模式
  • 居中模式,当前项会被调整至一屏的中间,同时前一项/后一项也会露出一部分
  • 支持轮播内容不足一屏的长度

注意

  1. 当使用水平模式时,widthitemWidth必须设置。
  2. 当使用垂直模式时,heightitemHeight必须设置。
  3. 如果轮播组件内容的数据源(数组)是会变化的,需要设置数据源作为data属性,不然轮播组件中的内容将不会更新。
  4. 下面的图片将有助于理解一些样式上的重要变量含义:

npm install @rn-components-kit/carousel --save

详细API请查看文档

3.4 CheckBox

复选框组件。

npm install @rn-components-kit/checkbox --save

详细API请查看文档

3.5 DeckSwiper

DeckSwiper让你一次评估一个选项,而不是从一组选项中进行选择。

npm install @rn-components-kit/deck-swiper --save

详细API请查看文档

3.6 Divider

分割线组件,支持两种方向: horizontalvertical.

npm install @rn-components-kit/divider --save

详细API请查看文档

3.7 Icon

语义化的矢量图形。支持以下特性:

注意:确保你的项目已经集成了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请查看文档

3.8 Progress

进度条组件,展示当前操作进度,支持以下特性:

  • linecircle两种类型
  • normalactivesuccessfail四种状态
  • 自定义颜色,支持线性渐变(目前仅限line类型)
  • 自定义进度文案格式,甚至支持信息展示区域完全自定义

注意

由于本组件支持线性渐变选项,所以你的项目需要集成react-native-linear-gradient。如果你的项目还没集成,你可以参照这里的指示完成。

npm install @rn-components-kit/progress --save

详细API请查看文档

3.9 Radio

Radio组件让用户从一堆选项中选择一项,支持以下特性:

  • 禁用点击
  • 自定义选中/未选中icon或图片
  • 状态切换时有过渡动画
npm install @rn-components-kit/radio --save

详细API请查看文档

3.10 Rating

评分组件,支持以下特性:

  • 支持点选滑动操作进行评分
  • 自定义图标样式(包括类型颜色大小
  • 支持不同的滑动步长(例如:0.1/0.2/0.5/1)
npm install @rn-components-kit/rating --save

详细API请查看文档

3.11 ScrollPicker

滚动选择器,支持以下特性:

  • 抹平AndroidiOS平台的交互差异
  • 支持多项选择器
  • 支持级联选择
  • ScrollPicker.Item支持自定义选项内容
npm install @rn-components-kit/scroll-picker --save

详细API请查看文档

3.12 Skeleton

骨架屏,常在loading时起占位的作用,支持以下特性:

  • avatartitleparagraph 三部分均支持定制化
  • 可以使用高阶组件withSkeleton完全定制化骨架屏的组成和样式

注意

当你使用装饰器的语法使用高阶组件withSkeleton时,确保你的项目安装了插件@babel/plugin-proposal-decorators.

npm install @rn-components-kit/skeleton --save

详细API请查看文档

3.13 Slider

以滑动的交互形式,从指定范围内选择值。支持以下特性:

  • 水平垂直两种方向
  • 12个滑块
  • 滑块和轨道样式高度可定制化
  • tip文案可定制化
npm install @rn-components-kit/slider --save

详细API请查看文档

3.14 Spin

用于展示页面或区块的加载中状态。支持以下7种不同动画类型:

  • Ladder
  • Rainbow
  • Wave
  • RollingCubes
  • ChasingCircles
  • Pulse
  • FlippingCard
npm install @rn-components-kit/spin --save

详细API请查看文档

3.15 SwipeOut

iOS样式的滑动隐藏按钮组件,支持以下特性:

  • 支持两个方向滑出
  • 隐藏部分支持多个按钮配置
  • 隐藏部分完全自定义
npm install @rn-components-kit/swipe-out --save

详细API请查看文档

3.16 Switch

开关选择器,支持以下特性:

  • 自定义颜色
  • 自定义大小
  • 两种风格: cupertinomaterial
npm install @rn-components-kit/switch --save

详细API请查看文档

3.17 Tag

进行标记和分类的小标签。支持以下特性:

  • 自定义颜色
  • 支持两种风格:outlinesolid
  • 可关闭及其关闭事件回调函数
npm install @rn-components-kit/tag --save

详细API请查看文档

3.18 Tooltip

当用户点击某个元素,展示一个气泡框,支持以下特性:

  • 气泡框支持topbottom两个方向
  • 完全自定义气泡框内容
npm install @rn-components-kit/tooltip --save

详细API请查看文档

4. 写在最后

最后再次放上仓库地址,欢迎star,欢迎提issue,欢迎提PR~

你也可以关注我的Blog,欢迎一起交流学习~

[转载]原文链接:https://segmentfault.com/a/1190000020069458

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-72519.html

文章标题:小哥哥小姐姐看过来,这里有个组件库需要您签收一下

相关文章
AngularJS vs. jQuery,看看谁更胜一筹
很多Web开发新手都会有这样的疑问“我应该使用什么开发框架呢,如何快速学会Web开发呢?”这个问题其实没有一个统一的正确答案,其中讨论最多的就是AngularJS和jQuery的差别。这两者的之间的比较很微妙,有时就像拿苹果和橘子在作比较,...
2015-11-12
7个提高效率的JavaScript调试工具
鐜板湪鐨凧avaScript浜嬪疄涓婂凡鐒舵垚涓轰簡娴佽�岀殑web璇�瑷€锛屽嵆浣垮畠骞朵笉瀹岀編銆傚緢澶氱▼搴忓憳涓嶅枩娆㈢敤JavaScript鍐欎唬鐮侊紝鏄�鍥犱负鍐欏埌鍚庢潵鎬讳細鍑虹幇鍚勭�嶈帿鍚嶅叾濡欑殑bug锛岃€屼笖鍦ㄥ紑...
2015-11-11
7个让JavaScript变得更好的注意事项
随着浏览器性能提高,伴随着新的HTML5的编程接口的稳步采用,网页上的JavaScript的音量在逐渐增加。然而,一个写得不好的程序编码却拥有着打破整个网站,让用户为之沮丧和驱赶潜在客户的潜力。 开发人员必须使用所有供他们任意使用的工具和技...
2015-11-12
JavaScript游戏之连连看源码分享
JavaScript游戏之连连看源码 下载地址:JavaScript游戏之连连看源码 解压密码:www.javascriptcn.com ...
2015-11-12
从 Node.js 分裂出 Io.js 事件看开源软件谁做主
Node.js 作为服务器编程语言的后起之秀,常用来构建和运行 Web 应用,近日却爆出其社区出现分裂。由于对官方运营商 Joyent 公司在 Node.js 管理上的长期不满,多位核心开发者另立门户,创建了分支 Io.js。从 GitHu...
2015-11-12
何为闭包?有关JS闭包的一些理解
简单一点的说:闭包就是能够读取其他函数内部变量的函数。那如何实现读取其它函数内部变量呢,大家都知道在JavaScript中内部函数可以访问其父函数中的变量,那如果将内部函数返回是不是代表能够通过它访问其父函数中的变量了呢,闭包的原理事实上就...
2015-11-11
JavaScript初学者必看“箭头函数”
本文我们介绍箭头 (arrow) 函数的优点。 更简洁的语法 我们先来按常规语法定义函数: function funcName(params) { return params + 2; } funcName(2); &#x2F;&#...
2017-05-26
HTML5会是下一个风口吗?
2014年10月底, W3C(万维网联盟)正式宣布HTML5正式定稿,科技圈就像发现了可以打破谷歌、苹果所统领的原生APP世界的方法,发表了很多宣讲HTML5将真正开始颠覆原生(Native)App的文章,也开始着力发展HTML5,开始抢占...
2015-11-12
关于Ajax应用开发需要注意的事项
接触Ajax,那时候的Ajax支持还不是很好,都要涉及底层,没有现成的框架给你调用。现在把常见的问题列举如下。 [b]1、编码问题[/b] 注意AJAX要取的文件是UTF-8编码的。GB2312编码传回BROWSE后中文会乱码。如果用VBS...
2015-11-11
2015年将会有大量基于HTML5和JS的WEB应用
随着HTML5的定稿,以及JS的迅速发展,我们有理由相信,在接下来的一年里,将会涌现出大量的WEB应用,网站的表现形式将不再仅仅局限于过去的形式,必将在2015年引来一次重大改革! ...
2015-11-12
回到顶部