ReactNativeUI工具包综述

如果你愿意自己做很多样式，React Native 的核心 UI 组件提供了很多跨平台的能力。 另一方面，由于它甚至缺少基本的 Button（TouchableOpacity 有人吗？），你可能会发现自己想要开始你的下一个 React Native 项目有更多的基础。 在有人制作 react-native-bootstrap 之前（顺便说一句，它还不存在），这里有一些其他的 React Native UI 工具包，你可以使用它们来 bootstrap（明白吗？）你的下一个反应原生项目。

图书馆

我们将比较和对比的库（按字母顺序）是：

• awesome-react-native - 一次性组件和原生模块列表
• Material UI - 将 Material Design 带入 React Native
• NativeBase - React Native 的基本跨平台 UI 组件
• React Native Elements - 跨平台 React Native UI 工具包
• Shoutem - React Native 应用程序的可定制组件集

其中一些具有演示应用程序，您可以使用 Expo（create-react-native-app 背后的技术）查看。 只需在 iPhone 或 Android 上下载并打开 Expo 应用程序，在浏览器中单击 UI Toolkit 的 Expo 链接，然后使用 QR 码扫描仪在手机上打开演示应用程序。

组件类别

组件类别将用于指示库具有哪些组件，而不必列出每个组件。 以下是可能的类别列表。 如果库没有在每个类别中指定的大部分组件，则该类别将不会被指示为存在。

• 输入： 按钮、输入字段、复选框等。
• 高级输入： 日期选择器、自动完成、文件上传器
• 指标： 徽章、进度指示器、Toasts、Snackbars
• 导航： 菜单、选项卡等。
• 对话框： 对话框、模态框、弹出框
• 布局：抽屉、列表、卡片、网格、排版

awesome-react-native

在我们进入下面更繁重的库之前，值得注意的是，使用 awesome-react-native github repo 上的这个 广泛的组件列表完全可以创建自己的组件大杂烩。 尽可能少地或尽可能多地使用这些即插即用组件，以使您的 React Native 开发体验既高效又愉快。

• GitHub： https://github.com/jondot/awesome-react-native#components
• 星星： 14k+
• 组件： 输入、高级输入、指示器、导航、对话框、布局

材质界面

有多个用于 React Native 的 Material UI 工具包，虽然它们看起来非常相似，但有一个 HUGE 区别：我发现只有 ONE 有效在 iOS 和 Android 上：react-native-material-kit。 由于 Material 是由 Google 为 Android 平台开发的，因此大多数库都是 Android 专用的。 但是请记住，使用这个工具包会给你的 React Native 应用程序带来一种特定于 Android 的感觉，即使在 iOS 上也是如此。 如果您希望大多数用户对 iOS UX 更满意，请考虑这一点。

• GitHub： https://github.com/xinthink/react-native-material-kit
• 星星： 3k+
• 组件： 输入、指示器
• 文档： http://www.xinthink.com/react-native-material-kit/docs/index.html
• 演示： https://github.com/xinthink/rnmk-demo (download and build the source for demo)

如果您对仅 Android 的库没有问题并且不担心 iOS 兼容性，您可以查看 react-native-material-design，其中包含更多组件，包括 Inputs、Indicators 和一些 Layout。

NativeBase

NativeBase 以组件的方式提供了很多东西——他们的演示应用程序被称为 Kitchen Sink 是有原因的。 这个库很好地尝试在 iOS 和 Android UX 之间取得平衡，使用特定于平台的样式来定制它以适应设备。 他们的组件结构很直观，他们的文档很棒，并且有很多来自网络的例子。 绝对在我的名单上排名靠前。

• GitHub： https://github.com/GeekyAnts/NativeBase
• 星星： 5.5k+
• 组件： 输入、指示器、导航、布局
• 文档： https://docs.nativebase.io/
• 演示： https://expo.io/@geekyants/nativebase-kitchenSink

反应原生元素

React Native Elements 是本综述中最受欢迎和功能最全的 UI 工具包。 React Native Elements 是少数不尝试复制 iOS 或 Android 特定样式，而是创建自己的组合的少数之一。 它比其他 React Native UI Toolkits 更加丰富多彩，如果你想大胆一点，这可能是一件好事。 它有很好的文档和相对较少的未解决问题。

• GitHub： https://github.com/react-native-training/react-native-elements
• 星星： 6.5k+
• 组件：输入，一些高级输入，指示器，导航，布局
• 文档： https://react-native-training.github.io/react-native-elements/docs/getting_started.html
• 演示： https://expo.io/@monte9/react-native-elements-app

舒腾

Shoutem 是一个比本综述中的其他工具包更加精致和设计的 UI 工具包，更倾向于 iOS 样式指南。 如果你追求优雅，这可能是正确的选择。 然而，关于 Shoutem 最独特的事情之一是，它们为开发位于 React Native 之上的应用程序提供了一个完整的平台，除了他们提供的 40 多个官方扩展之外，还鼓励您将应用程序编写为一组扩展. 虽然没有必要使用他们的 Shoutem UI Toolkit，但值得一看，看看这是否是您希望在下一个应用程序中使用的方向。

• GitHub： https://github.com/shoutem/ui
• 星星： 2.5k+
• 组件：导航、输入、布局
• 文档： https://shoutem.github.io/docs/ui-toolkit/introduction
• 演示： https://new.shoutem.com/

包起来

无论您采取哪种方式，从使用本综述中的一个 React Native UI 工具包，到通过 awesome-react-native 集成一大堆组件，站在巨人的肩膀上将帮助您完成下一个 React Native 应用程序一个伟大而时尚的开始。