在2019/2020年应该了解的15个React Native组件库

当您处理下一个应用程序项目时,React Native组件库可以节省大量时间。怎么会?好吧,让我们从React本身开始。您可能知道React是一个开放源代码的JavaScript库,可帮助为基于Web的应用程序和移动应用程序构建用户界面。它包含许多可以轻松用于应用程序的组件。

通常,在React中构建组件时,您需要对它们进行样式设置,以适应目标平台的准则。这就是React Native可以提供帮助的地方。该框架可用于通过使用React和目标平台的本机功能来开发移动应用。

之前,我们写了一篇介绍最佳UI组件库和框架的文章。在这篇文章中,我们将专门研究React Native组件库。

年度最佳React Native组件库

1. NativeBase

如果您发现自己为不同平台重写了React组件,则应该使用NativeBase这个动态的前端框架。该库是必需的跨平台React Native组件的集合,是开始构建应用程序的好地方。这些组件是使用React Native构建的,并结合了一些具有可自定义属性的JavaScript功能。您也可以直接使用任何第三方本机库。

NativeBase是完全开源的,在Github上拥有12,000多个星星。但是,随着更多功能和屏幕的添加,主题变得极为珍贵。现在,NativeBase也可用于Web用户。使用相同的JavaScript代码库,并针对Android和iOS使用特定于平台的设计,您可以为应用程序实现本机外观。他们的开源项目包括本机入门应用程序,Twitter克隆应用程序,ToDo应用程序和教程应用程序。在他们的高级会员篮子中,您会找到用于预订,租赁,职位列表,消息传递等的入门应用程序。

2.材料套件React Native

Material Kit React Native提供了带有材料设计的免费本机应用模板。借助Galio框架构建,它重新设计了最常见的组件,以使事物最小化并与Google的材质设计保持一致。它易于使用,并包含100多种手工制作的元素,例如按钮,卡片,导航和输入。通过更改主题,所有组件均可呈现颜色变化。此外,还有五个自定义插件和五个示例页面。

在Github上拥有近200个星星,它还提供了Pro版本,使您可以访问更多示例页面和文档。

3.反应本机元素

React Native Elements是一个跨平台的React Native UI工具包,它将开发人员制作的许多出色的开源UI组件放在一起。您可以使用React Native Elements组合在一起的包,并确保API具有一致的外观。毫不奇怪,它在Github上获得了17,000颗星。

该软件包包括一整套组件,例如定价,徽章,覆盖,分隔线和特定于平台的搜索栏。它们易于使用且真正可定制。所有组件的道具都定义在一个中央位置,这使得可以轻松地更新或修改组件。此外,它还可以作为一个平台,将小团队开发具有开源贡献的商业React Native应用程序连接起来。

要将React Native用于基于Web的项目,请使用React Native Web。它允许使用JavaScript创建快速,自适应的UI,并与React Dev工具集成。您将能够在React Native应用程序和网络应用程序之间共享代码库。它支持键入,单击或滑动作为输入模式,具有内置的可访问性和RTL支持,并且被Twitter,Uber和Flipkart之类的人使用。

4. React Native的Lottie

Lottie是Airbnb的手机库,可帮助您向应用中添加动画。通常,在Adobe After Effects中创建动画后,您需要将其转换为可在网络应用中使用的格式。 Lottie可以帮助您。

它通过从After Effects扩展BodyMovin导出JSON格式的动画数据来工作。该扩展程序与JS播放器捆绑在一起,可在网络上渲染动画。它也可以与React Native一起使用,您可以访问Github上的官方文档,该文档已获得近12,000星的支持。

Lottie库和插件是免费提供的,并且您可以使用精选的动画文件集合来使您的应用更具吸引力。动画文件较小,为矢量格式。因此,您不应对应用程序的性能产生任何影响。同时,它可以为您的UI增添趣味,并使其在视觉上更具吸引力。

5.反应本机矢量图标

如果您要寻找的是在应用程序中使用的某些图标,那么这是最好的React Native组件库之一。拥有3,000多个图标库,您几乎可以肯定找到了满足您需求的内容。而且,可以在将图标集成到项目中的同时对其进行自定义,样式设置和扩展。

该软件包支持Android的TabBar和工具栏,以及图像源和多种样式的字体。在Github上拥有近12,000个星星,它非常适合按钮,徽标和导航栏。它利用React Native的动画库将其与任何图标结合起来以创建动画组件。如果您已经具有带有关联CSS文件的图标字体,则可以轻松地使用generate-icon脚本生成图标集。

6.点燃CLI

Ignite CLI是用于React Native应用程序的可靠入门工具包。完全免费,默认的React Native样板可轻松帮助您构建本机应用程序。它安装简便,并遵循最佳施工实践,同时允许您根据您的项目调整锅炉板。开箱即用,它适用于Android和iOS。也支持独立插件。

另外,您可以从许多样板中选择或自己创建。模块化插件系统允许您添加应用程序功能或编写自己的功能。使用示例屏幕可帮助您测试第三方库并构建由多个组件组成的应用程序。该屏幕还包含使用基本组件构建的常用应用程序的示例。为了帮助您识别组件并轻松进行更改,此屏幕还将示例保存在组件文件中。在此屏幕上,您可以测试,使用和与团队共享组件。 Ignite CLI已在Github上赢得10,000颗以上的星。

7. React Native Mapview

提供用于Android和iOS的地图组件的React Native组件库之一是React Native Mapview。它的构造使得可以将任何地图上的规则要素(例如标记和多边形)指定为Mapview组件的子级。这有助于API直观地声明性地控制地图上的要素。就您而言,您需要确保在Google控制台中启用Google Maps API。

您可以做很多事情来定制地图样式。您将能够更改地图视图的位置,跟踪区域/位置,并使景点在Google地图上可点击。您可以启用放大到指定的标记或坐标,甚至为它们设置动画。如果您为道具分配了动画区域值,则Mapview可以利用Animated API来控制地图的中心和缩放。除非您指定自定义标记,否则将呈现默认标记。

很棒的是,标记是可拖动的,可以使用图像进行自定义,并且在拖动过程中会更新其他用户界面。如果需要更多功能,可以自定义标注,标记创建者,多边形创建者以及圆形和多边形叠加层。 iOS用户可以创建渐变折线。不足为奇的是,它在Github上拥有10,000颗以上的星星。

8.响应本地天才聊天

顾名思义,React Native Gifted Chat将帮助您为React Native(和Web)设置聊天UI。它与TypeScript一起编写,包括完全可自定义的组件,可帮助加载早期消息或将消息复制到剪贴板等。还有一个InputToolbar,可以帮助用户跳过键盘。

为了增强用户体验,它启用了头像作为用户的姓名首字母,本地化日期,多行TextInput,快速回复消息(bot)和系统消息。还支持Redux。天才聊天在Github上拥有8,000多个星级。

9. React Native UI小猫

可以用作任何领域(包括电子商务)的移动应用程序入门工具包的React Native组件库之一是React Native UI Kitten – Eva Design系统的React Native实现。它在Github上获得了5,000+颗星的评级,提供了大约20种通用组件的样式集,这些组件的样式相同,以照顾视觉外观。

有了这个永远免费的开源库,您可以使用提供的主题,也可以创建自己的主题,而无需更改组件的源代码。此外,您可以在运行时在深色和浅色主题之间切换,而无需重新加载页面。从NPM安装UI Kitten软件包后,就可以导入组件并开始在项目中使用它们。

10. React Native Paper

另一个免费的开源库是React Native Paper。它具有所有主要组件,并且这些组件的设计均符合Google的材料设计标准。

Paper是跨平台的,可在Web和移动设备上使用。有一些组件和交互方式可以适应几乎每种用例场景。包括动画,可访问性和UI逻辑在内的大多数细节都得到了照顾。您可以自定义默认颜色或制作自己的颜色。此外,您还具有完整的主题支持,以及在暗模式和亮模式之间切换的选项。在Github上,它可以容纳4,000多个星星。

11. React Native材料工具包

我们的React Native组件库列表中的下一个是另一套UI组件,它们将材料设计带入React Native。在内部,您会找到按钮,卡片,范围滑块和文本字段。您还将看到微调器和进度条以显示负载,以及切换开关,单选按钮和复选框的切换。

只需几行代码,即可使用符合Material design lite默认主题的预定义构建器添加按钮。使用构建器,您还可以从头开始创建自定义按钮。内置文本字段也是如此。不仅如此,您还可以通过更改全局主题来自定义样式。这将影响整个应用程序中的所有复选框和单选按钮。在Github上,该图书馆获得了4,465颗星。

12. React Native Material UI

React Native Material UI为React Native提供了将近20个组件。这些组件包括操作按钮,化身,子标题,抽屉,分隔线,工具栏等。这些组件是高度可定制的,并在其构造中使用材料设计。您对主题进行的任何自定义也可以扩展到其他组件,包括您自己构建的任何组件。可以通过在需要时覆盖样式来进行本地更改。

如果您已经在使用React Native Vector Icons,则无需进行任何安装。否则,您需要下载适用于Android的素材图标,并确保您具有适用于iOS的Roboto。该图书馆在Github上获得了3,000多个星级。

13. RNUILIB

RNUILIB包含60多个组件,可在Github上计时近2,000星。通过包含所有组件的实时示例,您可以在项目中使用它们之前先查看可用的选项。

其中的一些组件是:动画图像,指示进度的扫描仪,显示个人资料图像的化身,基本按钮和渐变滑块组件。

14. Nachos用户界面

Nachos UI拥有30多个可与任何JavaScript或React Native项目一起使用的现成组件,在Github上获得了1,900颗以上的星星。真正有帮助的是,您不必担心任何组件的样式。您要做的就是将任何预先设置样式的输入从一个组件导入到另一个组件。安装Nachos UI工具包后,选择所需的任何组件,导入相应的React Native代码,然后继续对其进行自定义以适合您的项目。

该免费,开源和社区驱动的软件使用Avocode(一种功能齐全的工具,用于共享和检查Photoshop和Sketch设计)。感谢React Native for web,您也可以将其用于基于Web的项目。

15.豪特姆

Shoutem是一个应用程序构建平台,可以通过使用扩展程序或模块化构建块来工作,就像在WordPress上使用插件构建网站一样。借助40多种全功能的扩展程序,它在Github上收集了450颗以上的星星。扩展包括照片和视频,产品,事件,餐厅菜单等的画廊。您可以在应用中自由使用这些开源扩展。而且,通过简单地分叉它们,您可以根据需要进行任何修改。

Shoutem提供许多移动后端服务,例如分析,用户身份验证,布局,推送通知等。此外,还有许多编码良好的主题供您使用和定制。 Shoutem使用100%JavaScript和React Native。

好吧,这就是我们最好的React Native组件库的列表。您选择哪一个?分享评论。

别忘了加入我们的速成班,以加快WordPress网站的速度。通过一些简单的修复,您甚至可以减少50-80%的加载时间:

相关文章