内容简介:随着React的日益流行和原生移动应用开发(和PWA)的崛起,React Native的采用率也在增长。与React类似,React Native也是使用独立的组件来构建UI。使用预先构建好的组件、组件库和UI工具包有助于我们更快地构建应用程序。在查看了大量有用的React和Vue组件库之后,根据大众的需求,我们列出了一个有用的React-Native UI库列表,可以帮助你更好地入门React Native。差不多1万个star以及超过1000个fork。NativeBase是一个广受欢迎的UI组件库,
随着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
感谢覃云对本文的审校。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- [译] 2019 年你应该要知道的 11 个 React UI 组件库
- 顶会论文应不应该提交代码?应该,但不能强制
- 单元测试 – 我应该对不应该在函数中传递的数据(无效输入)进行单元测试吗?
- 智能合约事件应该这么用
- 研发职位到底应该怎么设置?
- 我们应该如何给需求排序?
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Learn Python the Hard Way
Zed A. Shaw / Addison-Wesley Professional / 2013-10-11 / USD 39.99
Master Python and become a programmer-even if you never thought you could! This breakthrough book and CD can help practically anyone get started in programming. It's called "The Hard Way," but it's re......一起来看看 《Learn Python the Hard Way》 这本书的介绍吧!