2018年，你应该知道的11个React Native组件库-InfoQ



 写点什么

随着 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