11个React Native组件库

更新日期: 2019-04-28阅读: 3.1k标签: native

react Native 是 Facebook 2015年开源的 Javascript 框架,旨在使用 Javascript 高效开发手机端 App。配合着多个显而易见的优势和 Facebook 强大的宣传机器,它立刻成为国内外大小公司的明星开发框架。开源社区的参与激情、各方博客的宣传追捧,从其 Github 上 56000+ 星和 13000+ Fork 就可见一斑。 对于 React Native,iOS 开发者社区也是褒贬不一。有人认为 React Native 更快更好,苹果原生那套要完,不赶快学习就晚了;也有人认为 React Native 不过是 Facebook 的又一个玩具,以它现在的稚嫩还难以对原生的 Swift/Objective-C 造成足够威胁。

根据大众的需求,我们列出了一个有用的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://fly63.com/article/detial/3092

来聊聊怎么写react-native上的样式吧

在react-native上是怎么写样式的吧,和传统的web不一样的是,在react-native上面是没有css代码,不过得益于Yoga,我们可以在客户端上像写css一样的去书写我们的样式。

WKWebView 里 JS 和 native 通信的例子

初始化 wkwebview,设置 message handler,native 端注册了 testecho 的messageHandler,实现 WKScriptMessageHandler协议,执行JS 代码 ,所以 JS 可以通过 window.webkit.messageHandlers.testecho.postMessage 来回调客户端,和文档中说的一样

由使用request-promise-native想到的异步处理方法

因为js语言的特性,使用node开发程序的时候经常会遇到异步处理的问题。对于之前专长App开发的我来说,会纠结node中实现客户端API请求的“最佳实践”。下面以OAuth2.0为场景,需要处理的流程:获取access token、使用获取到的token,发起API请求、处理API数据

React Native项目使用react-apollo实现更新缓存的两种方式

GraphQL是一个API查询语言,他可以将使用PostgreSQL写的server代码自动生成Query或者Mutation,非常的方便。而Apollo Client就是一个强大的JavaScript GraphQL客户端。对于cache,在Apollo Client中有着强大的管理策略。

React Native 传参的几种方式

在React Native 中由于业务的需要, 我们往往要在诸多的页面间,组件之间做一些参数的传递与管理, 在这里我总结了几大经过验证,稳定好用的方式给大家

如何正确选型,React Native 还是 Native?

随着 H5 标准的发布以及推广,使得移动应用的开发也受到了很大影响,出于效率、成本等原因,移动应用的开发不再完全依赖于 “原生”。近日越发火热的混合应用(Hybrid App)介于 Web 应用和原生应用之间

react-native报错Cannot get property packageName on null object

react-native打包安卓apk的时候,报错Cannot get property packageName on null object,完全没有头绪,研究了半天才发现竟然是因为package.json里面scripts自定了命令导致的,无法理解为何会影响安卓打包并且报错packageName null

React Native 添加 Redux 支持

之前写的项目都是人家编写好的脚手架,里面包含项目所需的环境文件,但由于有些东西用不到打包增加软件体积,所以自己从头搭建个环境。是基于 Native Base + react-navigation + Redux 的 React Native 脚手架,现在项目环境如下

Flutter platform view 使用篇

Flutter作为备受关注的跨平台的开发框架,长远来看,前景肯定是比较好的,在其基础组件还未完善与成熟之前,能够高效的复用现有的native组件,是比较合适的方案。官方提供了Plugin的方式,允许将一个成熟的native组件(比如mapview)

JSBridge 初探

近些年,移动端普及化越来越高,开发过程中选用 Native 还是 H5 一直是热门话题。Native 和 H5 都有着各自的优缺点,为了满足业务的需要,公司实际项目的开发过程中往往会融合两者进行 Hybrid 开发。Native 和 H5 分处两地,看起来无法联系,那么如何才能让双方协同实现功能呢?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!