51

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

 5 years ago
source link: http://www.infoq.com/cn/news/2018/08/18-11-react-native-componetlib?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

随着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

感谢覃云对本文的审校。


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK