随着React的日益流行和原生移动应用开发(和PWA)的崛起,ReactNative的采用率也在增长。与React类似,ReactNative也是使用独立的组件来构建UI。使用预先构建好的组件、组件库和UI工具包有助于我们更快地构建应用程序。在查看了大量有用的React和Vue组件库之后,根据大众的需求,我们列出了一个有用的React-NativeUI库列表,可以帮助你更好地入门ReactNative。
1.NativeBase差不多1万个star以及超过1000个fork。NativeBase是一个广受欢迎的UI组件库,为ReactNative提供了数十个跨平台组件。在使用NativeBase时,你可以使用任意开箱即用的第三方原生库,而这个项目本身也拥有一个丰富的生态系统,从有用的入门套件到可定制的主题模板。这是另一个不错的入门套件(startreact.com/themes/nati…)。
NativeBase项目地址:github.com/GeekyAnts/N…
可定制主题模板:nativebase.io/nativebase-…
入门套件:reactnativeseed.com/
2.ReactNativeElementsstar数超过12K,是一个高度可定制的跨平台UI工具包,完全用Javascript构建。该库的作者声称“ReactNativeElements的想法更多的是关于组件结构而不是设计,这意味着在使用某些元素时可以减少样板代码,但可以完全控制它们的设计”,这对于开发新手和经验丰富的老手来说都很有吸引力。这是一个Expo示例应用程序(react-native-training.github.io/react-nativ…),对它的所有组件进行了演示。
ReactNativeElements项目地址:github.com/react-nativ…
3.Shoutemstar数在3.5k左右,是一个ReactNativeUI工具包,由3个部分组成:UI组件、主题和组件动画。该库为iOS和Android提供了一组跨平台组件,所有组件都是可组合和可定制的。每个组件还提供了与其他组件一致的预定义样式,这样可以在无需手动定义复杂样式的情况下构建复杂的组件。
Shoutem项目地址:shoutem.github.io/ui/
4.UIKittenstar数在3K左右,这个库提供了一个可定制和可重复使用的react-native组件工具包,该工具包将样式定义移到特定位置,从而可以单独重用组件或为组件设置样式。通过传递不同的变量,可以很容易地“动态”改变主题样式。这里有一个很好的Expo示例应用程序(expo.io/@akveo/ui-k…)。
UIKitten项目地址:github.com/akveo/react…
5.ReactNativeMaterialUIstar数2K左右,提供了一组高度可定制的UI组件,实现了谷歌的MaterialDesign。请注意,这个库使用了一个名为uiTheme的JS对象,这个对象在上下文间传递,以实现最大化的定制化能力。默认情况下,这个uiTheme对象使用的是lightTheme(github.com/xotahal/rea…)。这里有一个包含库组件及示例的清单(github.com/xotahal/rea…)。
ReactNativeMaterialUI项目地址:github.com/xotahal/rea…
6.ReactNativeMaterialKitstar数4K左右,虽然最后一次NPM发布是在2017年12月,但这个库仍然值得一提,它提供了一套基本但很有用的UI组件和主题,实现了谷歌的MaterialDesign。为什么要用它?因为它简单实用。但因为维护不是很活跃,所以请谨慎考虑是否采用。
ReactNativeMaterialKit项目地址:github.com/xinthink/re…
7.NachosUIstar数1.5K左右,NachosUI是一个ReactNative组件库,提供了30多个可定制的组件,这些组件也可以通过react-native-web在Web上运行。它通过了快照测试,支持格式化和yarn,提供了热火的设计和全局主题管理器。
NachosUI项目地址:github.com/nachos-ui/n…
8.ReactNativeUILibraryWix工程公司正致力于开发这个最先进的UI工具集和组件库,它还支持react-native-animatable和react-native-blur。这个库附带了一组预定义的样式预设(转换为修饰符),包括Color、Typography、Shadow、BorderRadius等。
ReactNativeUILibrary项目地址:github.com/wix/react-n…
9.ReactNativePaperstar数1.5K左右,是一个跨平台的UI组件库,它遵循MaterialDesign指南,提供了全局主题支持和可选的babel插件,用以减少捆绑包大小。这里是一个Expo示例应用程序,可帮你快速了解这个库(expo.io/@satya164/r…)。
ReactNativePaper项目地址:github.com/callstack/r…
10.ReactNativeVectorIconsstar数10K左右,这个库是一组ReactNative的可定制图标,支持NavBar/TabBar/ToolbarAndroid、图像源和完整样式。它非常有用,而且被数千个应用程序以及其他UI组件库(如react-native-paper)所使用。这个库提供了开箱即用的预定义捆绑图标集,这里是这个库中所有图标的完整示例(oblador.github.io/react-nativ…)。
ReactNativeVectorIcons项目地址:github.com/oblador/rea…
11.Teasetstar数1.3K左右,是一个ReactNativeUI库,提供了20多个纯JS(ES6)组件,用于内容显示和动作控制。虽然它的文档不够详尽,但它简洁的设计吸引了我的眼球。
Teaset项目地址:github.com/rilyu/tease…
特别推荐这里还有一些可能很有用的库,但其中一些已经停止更新,所以请谨慎考虑要不要采用。
Trixieapp/react-virgin描述:你正在寻找的react-nativeUIKit。
地址:github.com/Trixieapp/r…
infinitered/ignite描述:最热门的ReactNativeCLI工具,可用于生成模板代码、插件、生成器等。
地址:github.com/infinitered…
bartonhammond/snowflake描述:一个React-Native项目启动框架,提供模板代码、Redux、RNRouter等示例。
地址:github.com/bartonhammo…
panza-org/panza描述:react-native无状态函数式UI组件,可帮助你快速构建和运行项目。
地址:github.com/panza-org/p…
binggg/mrn描述:MaterialReactNative(MRN)——Material设计风格的ReactNative组件库。
地址:github.com/binggg/mrn
FacebookDesign-iOS10iPhoneGUI描述:iOS10公开版的GUI元素模板,包括Sketch、Photoshop、Figma、XD和Craft。
地址:facebook.design/ios10
wix/react-native-calendars描述:ReactNative日历组件。
地址:github.com/wix/react-n…
oblador/react-native-progress描述:使用ReactART的ReactNative的进度指示器和微调器。
地址:github.com/oblador/rea…
maxs15/react-native—spinkit描述:ReactNative的动画加载指示器集合。
地址:github.com/maxs15/reac…
react-community/lottie-react-native描述:ReactNative的Lottie包装器。
地址:github.com/react-commu…
react-native-material-design描述:用于MaterialDesign的ReactNativeUI组件。
地址:github.com/react-nativ…
查看英文原文:blog.bitsrc.io/11-react-na…
感谢覃云对本文的审校。