2020年您应该知道的15个React本机组件库

反应您应该知道的本机组件库


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

通常,在React中构建组件时,您需要对它们进行样式设置,以适应目标平台的准则。那边 反应本机 可以帮忙。该框架可用于通过使用React和目标平台的本机功能来开发移动应用.

之前,我们写了一篇介绍最佳UI组件库和框架的文章。在本文中,我们将详细介绍React Native组件库.

年度最佳React Native组件库

1个. 本机库

最佳React Native组件库#1:NativeBase

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

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

2. 材质套件React Native

最佳React Native组件库#2:material-kit-react-native

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

近200颗星 Github, 它提供了一个 专业版 也可以让您访问更多示例页面和文档.

3. 反应本机元素

最佳React Native组件库#3:react-native-elements

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

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

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

4. Lottie for React Native

乐透

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和工具栏,以及图像源和多种样式的字体。拥有近12,000颗恒星 Github, 它非常适合按钮,徽标和导航栏。它依靠 React Native的动画库 将其与任何图标结合以创建动画组件。如果您已经具有带有关联CSS文件的图标字体,则可以使用generate-icon脚本轻松生成图标集.

6. 点燃CLI

点燃

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

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

7. 反应本地Mapview

反应本机图

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

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

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

8. 反应本地天才聊天

反应本机聊天

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

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

9. React Native UI小猫

react-native-ui-kitten

React Native UI Kitten是可用于任何领域(包括电子商务)的移动应用程序入门工具包的React Native组件库之一-React Native的React实施。 EVA设计系统. 拥有5,000颗星以上的评分 Github, 它提供了一组约20种通用组件,它们的样式相同,以照顾视觉外观.

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

10. 反应本机纸

反应纸

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

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

11. 反应本机材料套件

反应本机材料套件

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

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

12. React Native Material UI

反应本机用户界面

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

如果您已经在使用React Native Vector Icons,则无需进行任何安装。否则,您需要下载 Android的素材图标 并确保你有 机械手 适用于iOS。该图书馆已获得3,000颗以上的星标 Github.

13. 鲁尼利

nu

该套件包含60多个组件,RNUILIB上的时钟约为2000星 Github. 通过包含所有组件的实时示例,您可以在将其用于项目之前检出可用选项。.

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

14. 玉米片UI

玉米片UI

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

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

15. 舒特姆

out

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

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

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

您可能也对这些文章感兴趣:

  • 适用于应用程序开发的免费React Native模板

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map