2018年,你应该知道的11个React Native组件库

随着React的日益流行和原生移动应用开发(和PWA)的崛起,React Native的采用率也在增长。与React类似,React Native也是使用独立的组件来构建UI。使用预先构建好的组件、组件库和UI工具包有助于我们更快地构建应用程序。在查看了大量有用的React和Vue组件库之后,根据大众的需求,我们列出了一个有用的React-Native UI库列表,可以帮助你更好地入门React Native。

1. NativeBase

差不多1万个star以及超过1000个fork。NativeBase是一个广受欢迎的UI组件库,为React Native提供了数十个跨平台组件。在使用NativeBase时,你可以使用任意开箱即用的第三方原生库,而这个项目本身也拥有一个丰富的生态系统,从有用的入门套件到可定制的主题模板。这是另一个不错的入门套件(https://startreact.com/themes/native-starter/)。

NativeBase项目地址: https://github.com/GeekyAnts/NativeBase

可定制主题模板: https://nativebase.io/nativebase-customizer

入门套件: https://reactnativeseed.com/

2. React Native Elements

star数超过12K,是一个高度可定制的跨平台UI工具包,完全用Javascript构建。该库的作者声称“React Native Elements的想法更多的是关于组件结构而不是设计,这意味着在使用某些元素时可以减少样板代码,但可以完全控制它们的设计”,这对于开发新手和经验丰富的老手来说都很有吸引力。这是一个Expo示例应用程序(https://react-native-training.github.io/react-native-elements/),对它的所有组件进行了演示。

React Native Elements项目地址: https://github.com/react-native-training/react-native-elements

3. Shoutem

star数在3.5k左右,是一个React Native UI工具包,由3个部分组成:UI组件、主题和组件动画。该库为iOS和Android提供了一组跨平台组件,所有组件都是可组合和可定制的。每个组件还提供了与其他组件一致的预定义样式,这样可以在无需手动定义复杂样式的情况下构建复杂的组件。

Shoutem项目地址:https://shoutem.github.io/ui/

4. UI Kitten

star数在3K左右,这个库提供了一个可定制和可重复使用的react-native组件工具包,该工具包将样式定义移到特定位置,从而可以单独重用组件或为组件设置样式。通过传递不同的变量,可以很容易地“动态”改变主题样式。这里有一个很好的Expo示例应用程序(https://expo.io/@akveo/ui-kitten-explorer-app)。

UI Kitten项目地址: https://github.com/akveo/react-native-ui-kitten

5. React Native Material UI

star数2K左右,提供了一组高度可定制的UI组件,实现了谷歌的Material Design。请注意,这个库使用了一个名为uiTheme的JS对象,这个对象在上下文间传递,以实现最大化的定制化能力。默认情况下,这个uiTheme对象使用的是lightTheme(https://github.com/xotahal/react-native-material-ui/blob/master/src/styles/themes/light.js)。这里有一个包含库组件及示例的清单(https://github.com/xotahal/react-native-material-ui/blob/master/docs/Components.md)。

React Native Material UI项目地址: https://github.com/xotahal/react-native-material-ui

6. React Native Material Kit

star数4K左右,虽然最后一次NPM发布是在2017年12月,但这个库仍然值得一提,它提供了一套基本但很有用的UI组件和主题,实现了谷歌的Material Design。为什么要用它?因为它简单实用。但因为维护不是很活跃,所以请谨慎考虑是否采用。

React Native Material Kit项目地址: https://github.com/xinthink/react-native-material-kit

7. Nachos UI

star数1.5K左右,Nachos UI是一个React Native组件库,提供了30多个可定制的组件,这些组件也可以通过react-native-web在Web上运行。它通过了快照测试,支持格式化和yarn,提供了热火的设计和全局主题管理器。

Nachos UI项目地址: https://github.com/nachos-ui/nachos-ui

8. React Native UI Library

Wix工程公司正致力于开发这个最先进的UI工具集和组件库,它还支持react-native-animatable和react-native-blur。这个库附带了一组预定义的样式预设(转换为修饰符),包括Color、Typography、Shadow、Border Radius等。

React Native UI Library项目地址: https://github.com/wix/react-native-ui-lib

9. React Native Paper

star数1.5K左右,是一个跨平台的UI组件库,它遵循Material Design指南,提供了全局主题支持和可选的babel插件,用以减少捆绑包大小。这里是一个Expo示例应用程序,可帮你快速了解这个库(https://expo.io/@satya164/react-native-paper-example)。

React Native Paper项目地址: https://github.com/callstack/react-native-paper

10. React Native Vector Icons

star数10K左右,这个库是一组React Native的可定制图标,支持NavBar/TabBar/ToolbarAndroid、图像源和完整样式。它非常有用,而且被数千个应用程序以及其他UI组件库(如react-native-paper)所使用。这个库提供了开箱即用的预定义捆绑图标集,这里是这个库中所有图标的完整示例(https://oblador.github.io/react-native-vector-icons/)。

React Native Vector Icons项目地址: https://github.com/oblador/react-native-vector-icons

11. Teaset

star数1.3K左右,是一个React Native UI库,提供了20多个纯JS(ES6)组件,用于内容显示和动作控制。虽然它的文档不够详尽,但它简洁的设计吸引了我的眼球。

Teaset项目地址: https://github.com/rilyu/teaset

特别推荐

这里还有一些可能很有用的库,但其中一些已经停止更新,所以请谨慎考虑要不要采用。

Trixieapp/react-virgin

描述:你正在寻找的react-native UI Kit。

地址:https://github.com/Trixieapp/react-virgin

infinitered/ignite

描述:最热门的React Native CLI工具,可用于生成模板代码、插件、生成器等。

地址:https://github.com/infinitered/ignite

bartonhammond/snowflake

描述:一个React-Native项目启动框架,提供模板代码、Redux、RN Router等示例。

地址:https://github.com/bartonhammond/snowflake

panza-org/panza

描述:react-native无状态函数式UI组件,可帮助你快速构建和运行项目。

地址:https://github.com/panza-org/panza

binggg/mrn

描述:Material React Native(MRN)——Material设计风格的React Native组件库。

地址:https://github.com/binggg/mrn

Facebook Design-iOS 10 iPhone GUI

描述:iOS 10公开版的GUI元素模板,包括Sketch、Photoshop、Figma、XD和Craft。

地址:https://facebook.design/ios10

wix/react-native-calendars

描述:React Native日历组件。

地址:https://github.com/wix/react-native-calendars

oblador/react-native-progress

描述:使用ReactART的React Native的进度指示器和微调器。

地址:https://github.com/oblador/react-native-progress

maxs15/react-native—spinkit

描述:React Native的动画加载指示器集合。

地址:https://github.com/maxs15/react-native-spinkit

react-community/lottie-react-native

描述:React Native的Lottie包装器。

地址:https://github.com/react-community/lottie-react-native

react-native-material-design

描述:用于Material Design的React Native UI组件。

地址:https://github.com/react-native-material-design/react-native-material-design


查看英文原文:https://blog.bitsrc.io/11-react-native-component-libraries-you-should-know-in-2018-71d2a8e33312

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容