你应该知道的10个React Native组件库

react-native

在构建React Native应用程序时，最佳实践是利用隔离的UI组件来加快开发时间。这个想法并不局限于React Native；就像React允许开发人员使用原生HTML元素，比如div、文本输入框、按钮等一样，React Native框架让开发人员使用特定于平台的原生GUI元素，我们可以使用这些元素来开发移动应用，并加上我们自定义的样式。但是，在某些情况下，这些内置组件无法满足我们的设计和开发目标，这意味着我们要么必须从头开始构建自定义组件，要么使用组件库。

为什么要在React Native中使用组件库？

组件库提供预先开发的组件，帮助我们更快地交付React Native项目。例如，我们可以使用react-native-vector-icons创建图标按钮。假设你使用的是一个提供完整UI工具包的React Native组件库。在这种情况下，你不需要为内置UI元素编写自定义样式，也不需要安装许多第三方预先实现的组件。组件库通常提供一系列预先开发的可自定义UI元素，用于构建任何现代应用程序。

由于有这么多优秀的选择，决定为你的新React Native应用程序使用哪个组件库可能会很具挑战性。但是，一旦你了解了每个组件库提供的组件、特性、限制和开发人员支持，就更容易根据你的设计目标选择一个。

最好的React Native组件库

在本文中，我们将探讨一些最佳的开源React Native组件库。它们不仅能帮助你采用强大的方法并加快项目交付时间，还为像iOS和Android这样的平台提供了质量支持：

对于每个组件库，我将提供一个摘要、一些突出的特点和有用的链接，这样你就可以根据你的设计目标选择一个。

React Native Paper


React Native Paper是一个跨平台的React Native UI库，基于Google的Material Design。由官方React Native开发合作伙伴Callstack开发，React Native Paper支持主题和提供可定制和生产就绪的组件。

在使用该库时，你可以通过使用一个Babel插件来减小其包大小，该插件允许你可选地要求模块。这将排除你的应用程序未使用的所有模块，并重写导入语句以仅包含在应用程序组件文件中导入的模块。

React Native Paper还支持使用React Native Web。

如何使用React Native Paper主题？

将主题应用于特定组件很容易；React Native Paper带有两个默认主题，即浅色和深色，你可以进行扩展。它还使用react-native-vector-icons库来支持并正确使用图标在按钮、浮动操作按钮、列表等中。

React Native Paper相关资料

React Native Elements

作为最古老和最容易入门的库之一，React Native Elements是一个跨平台的UI工具包，实现了Material Design。与遵循武断的设计系统不同，这个工具包库通过其通用内置组件提供了一个更基本的结构，意味着你将更多地控制如何定制组件。在此库中，任何组件的自定义都将包括一些自定义属性，以及来自React Native核心API的属性的混合。

话虽如此，当使用此库时，我发现相比本文涵盖的其他一些库，我可以写更少的样板代码。使用这个UI工具包构建的应用程序在iOS和Android平台上也看起来和感觉都是通用的。

ThemeProvider提供了主题支持。与其他一些库不同，它为你提供了浅色和深色主题，你需要定义自己的主题才能使其工作。你还可以通过使用React Native Web在Web项目中使用React Native Elements。

相关资料

NativeBase


NativeBase是另一个自React Native早期就存在的库。它支持一长串跨平台UI组件，这些组件也是生产就绪的，不仅为每个常规组件提供基本支持，还为许多组件提供了预定义的配置，涵盖了几乎所有可能的用例。

例如，Select组件呈现了一个跨平台的下拉式UI元素，并支持自定义样式，比如：

  • 使用基于下拉式的图标来打开和关闭状态
  • 添加占位符文本
  • 设置选定值

Select组件支持主题，并提供基于NativeBase组件库的付费模板，你可以使用它们来节省开发时间。然而，整个UI库都是免费的和开源的。

NativeBase还提供了一个名为KitchenSink的全面演示应用程序，在这里你可以通过Web浏览器探索所有组件。

相关资料

React Native UI Kitten


UI Kitten是一个支持React Native应用的开源库。它基于Eva Design System，并拥有超过480个独有的图标。它提供支持创建自定义主题的功能，但也允许您使用或扩展两个默认的视觉主题。

您可以使用超过20个基本UI组件，而且它也是为全球应用提供支持右向左书写系统的少数几个UI库之一。它也支持Web。

如果您为现有项目设置此UI库，您需要进行一些配置步骤。对于新项目，您可以轻松使用预先开发的应用模板。请确保先阅读其设计系统以了解设计原则。

React Native UI Kitten相关资料:

React Native UI Library


由Wix维护并广泛使用的RNUI库是构建出色的React Native应用的工具集。它支持较旧和最新的React Native版本，并提供了超过20个定制的组件，其中一些组件（如Drawer）可以轻松集成，用于构建现代可滑动列表，就像Gmail应用的收件箱一样。它还具有自定义动画组件，例如动画扫描器，对于指示卡片的进度（如上传状态）非常有用，以及动画图像。

RNUI是另一个支持右向左书写系统的UI库，并且包含全面的可访问性支持。

RNUI相关资料:

文档
包括对Expo的支持
GitHub存储库
实时示例

Teaset


Teaset是一个提供超过20个纯组件的UI库，其设计具有极简的特点。该库的目标是让您和您的用户更专注于应用的内容，而不是其设计。它支持一些常见组件，如Input和CheckBox，同时还提供了更不常见的组件，如Stepper、Badge、TabView和DrawerView。

Teaset相关资料:

Shoutem UI


如果您正在寻找React Native iOS或Android应用的专业外观UI，则Shoutem UI工具包是一个很好的选择。Shoutem UI是Shoutem UI工具包的一部分的开源库。

Shoutem UI由超过25个可组合和可定制的UI组件组成，具有预定义的样式，支持其他组件。您可以通过组合它们来构建复杂的UI。您还可以使用Shoutem主题库应用自定义类似CSS的样式，以及使用动画组件库（如ZoomIn、FadeIn等）应用动画。

Shoutem UI相关资料:

Lottie for React Native


Lottie是由Airbnb开发的出色的开源动画图形库，用于创建漂亮的动画效果。Lottie社区提供了精选的动画，你可以自由地在React Native的iOS或Android应用中使用。

你还可以使用Adobe After Effects创建自定义动画。然后，Lottie使用Bodymovin扩展将自定义动画导出为JSON格式，并在原生移动应用中呈现它。由于JSON导出格式的原因，你的应用将具有出色的性能。

lottie-react-native包包括Lottie组件，你可以在React Native应用中使用它来添加Lottie动画。内部使用lottie-android和lottie-ios分别在Android和iOS上本地呈现Lottie格式的文件。

Lottie for React Native相关资料

React Native Maps


React Native Maps是另一个有用的库，为iOS和Android应用提供可定制的地图组件。该库中的组件包括：

  • MapView
  • Marker
  • Polygon
  • Polyline
  • Callout
  • Circle
  • HeatMap
  • Geojson
  • Overlay

使用这些组件，你可以为用户提供不同的地图体验。此外，你还可以将这些组件与Animated API结合使用，为组件提供动画效果。例如，你可以对地图进行缩放、标记视图和标记坐标进行动画处理，还可以在地图上渲染多边形和折线。

React Native Maps仅与React Native ≥v0.64.3兼容。

React Native Maps相关资料

React Native Gifted Chat


在一些开发场景中，React Native开发人员向他们的移动应用添加了聊天屏幕。例如，集成聊天机器人或实现用户间聊天系统等情况需要开发包含传入和传出消息、带有头像的文本输入以及发送按钮的聊天组件。

react-native-gifted-chat库提供了一个预先开发的可定制聊天组件，你可以直接使用，而无需从头开始编写。

这个聊天组件库具有以下突出特点：

  • 高度可定制的UI
  • 有用的事件处理程序，如onPressAvatar、onInputTextChanged等
  • 打字指示器
  • 用于构建聊天机器人UI的快速回复选项
  • 附件照片等功能的编辑器操作

简而言之：React Native Gifted Chat相关资料

如何选择React Native组件库呢？

要回答这个问题，你需要考虑你自己的独特项目。如果有多个组件库适合你的设计或开发目标，选择具有良好开发者支持、活跃的开发时间表和写得好的文档的那个是一个不错的决定。

列表中包含的组件库都在积极地维护。这些库存在的目的是为了加快你的开发速度，并提供一种稳健的方式来构建应用程序，以便你每次创建新的React Native应用程序时都不必重新发明轮子。只要你知道你的UI设计目标是什么，这些库中的任何一个都应该能胜任。

你可以在awesome-react-native GitHub存储库中找到更多的第三方、开源UI组件库。

涅槃快乐热爱生活，追求技术

个人简介。