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

女爷i 2021-12-04 09:59 1772阅读 0赞

随着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时，你可以使用任意开箱即用的第三方原生库，而这个项目本身也拥有一个丰富的生态系统，从有用的入门套件到可定制的主题模板。这是另一个不错的入门套件（[startreact.com/themes/nati…][startreact.com_themes_nati]）。

NativeBase项目地址: [github.com/GeekyAnts/N…][github.com_GeekyAnts_N]

可定制主题模板: [nativebase.io/nativebase-…][nativebase.io_nativebase-]

入门套件: [reactnativeseed.com/][reactnativeseed.com]

## 2. React Native Elements ##

star数超过12K，是一个高度可定制的跨平台UI工具包，完全用Javascript构建。该库的作者声称“React Native Elements的想法更多的是关于组件结构而不是设计，这意味着在使用某些元素时可以减少样板代码，但可以完全控制它们的设计”，这对于开发新手和经验丰富的老手来说都很有吸引力。这是一个Expo示例应用程序([react-native-training.github.io/react-nativ…][react-native-training.github.io_react-nativ])，对它的所有组件进行了演示。

React Native Elements项目地址: [github.com/react-nativ…][github.com_react-nativ]

## 3. Shoutem ##

star数在3.5k左右，是一个React Native UI工具包，由3个部分组成：UI组件、主题和组件动画。该库为iOS和Android提供了一组跨平台组件，所有组件都是可组合和可定制的。每个组件还提供了与其他组件一致的预定义样式，这样可以在无需手动定义复杂样式的情况下构建复杂的组件。

Shoutem项目地址：[shoutem.github.io/ui/][shoutem.github.io_ui]

## 4. UI Kitten ##

star数在3K左右，这个库提供了一个可定制和可重复使用的react-native组件工具包，该工具包将样式定义移到特定位置，从而可以单独重用组件或为组件设置样式。通过传递不同的变量，可以很容易地“动态”改变主题样式。这里有一个很好的Expo示例应用程序（[expo.io/@akveo/ui-k…][expo.io_akveo_ui-k]）。

UI Kitten项目地址: [github.com/akveo/react…][github.com_akveo_react]

## 5. React Native Material UI ##

star数2K左右，提供了一组高度可定制的UI组件，实现了谷歌的Material Design。请注意，这个库使用了一个名为uiTheme的JS对象，这个对象在上下文间传递，以实现最大化的定制化能力。默认情况下，这个uiTheme对象使用的是lightTheme（[github.com/xotahal/rea…][github.com_xotahal_rea]）。这里有一个包含库组件及示例的清单（ [github.com/xotahal/rea…][github.com_xotahal_rea 1]）。

React Native Material UI项目地址: [github.com/xotahal/rea…][github.com_xotahal_rea 2]

## 6. React Native Material Kit ##

star数4K左右，虽然最后一次NPM发布是在2017年12月，但这个库仍然值得一提，它提供了一套基本但很有用的UI组件和主题，实现了谷歌的Material Design。为什么要用它？因为它简单实用。但因为维护不是很活跃，所以请谨慎考虑是否采用。

React Native Material Kit项目地址: [github.com/xinthink/re…][github.com_xinthink_re]

## 7. Nachos UI ##

star数1.5K左右，Nachos UI是一个React Native组件库，提供了30多个可定制的组件，这些组件也可以通过react-native-web在Web上运行。它通过了快照测试，支持格式化和yarn，提供了热火的设计和全局主题管理器。

Nachos UI项目地址: [github.com/nachos-ui/n…][github.com_nachos-ui_n]

## 8. React Native UI Library ##

Wix工程公司正致力于开发这个最先进的UI工具集和组件库，它还支持react-native-animatable和react-native-blur。这个库附带了一组预定义的样式预设（转换为修饰符），包括Color、Typography、Shadow、Border Radius等。

React Native UI Library项目地址: [github.com/wix/react-n…][github.com_wix_react-n]

## 9. React Native Paper ##

star数1.5K左右，是一个跨平台的UI组件库，它遵循Material Design指南，提供了全局主题支持和可选的babel插件，用以减少捆绑包大小。这里是一个Expo示例应用程序，可帮你快速了解这个库（[expo.io/@satya164/r…][expo.io_satya164_r]）。

React Native Paper项目地址: [github.com/callstack/r…][github.com_callstack_r]

## 10. React Native Vector Icons ##

star数10K左右，这个库是一组React Native的可定制图标，支持NavBar/TabBar/ToolbarAndroid、图像源和完整样式。它非常有用，而且被数千个应用程序以及其他UI组件库（如react-native-paper）所使用。这个库提供了开箱即用的预定义捆绑图标集，这里是这个库中所有图标的完整示例（[oblador.github.io/react-nativ…][oblador.github.io_react-nativ]）。

React Native Vector Icons项目地址: [github.com/oblador/rea…][github.com_oblador_rea]

## 11. Teaset ##

star数1.3K左右，是一个React Native UI库，提供了20多个纯JS（ES6）组件，用于内容显示和动作控制。虽然它的文档不够详尽，但它简洁的设计吸引了我的眼球。

Teaset项目地址: [github.com/rilyu/tease…][github.com_rilyu_tease]

转载自：[https://juejin.im/entry/5b8c9af4e51d453884363e1c][https_juejin.im_entry_5b8c9af4e51d453884363e1c]

[startreact.com_themes_nati]: https://link.juejin.im/?target=https%3A%2F%2Fstartreact.com%2Fthemes%2Fnative-starter%2F
[github.com_GeekyAnts_N]: https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2FGeekyAnts%2FNativeBase
[nativebase.io_nativebase-]: https://link.juejin.im/?target=https%3A%2F%2Fnativebase.io%2Fnativebase-customizer
[reactnativeseed.com]: https://link.juejin.im/?target=https%3A%2F%2Freactnativeseed.com%2F
[react-native-training.github.io_react-nativ]: https://link.juejin.im/?target=https%3A%2F%2Freact-native-training.github.io%2Freact-native-elements%2F
[github.com_react-nativ]: https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Freact-native-training%2Freact-native-elements
[shoutem.github.io_ui]: https://link.juejin.im/?target=https%3A%2F%2Fshoutem.github.io%2Fui%2F
[expo.io_akveo_ui-k]: https://link.juejin.im/?target=https%3A%2F%2Fexpo.io%2F%40akveo%2Fui-kitten-explorer-app
[github.com_akveo_react]: https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fakveo%2Freact-native-ui-kitten
[github.com_xotahal_rea]: https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fxotahal%2Freact-native-material-ui%2Fblob%2Fmaster%2Fsrc%2Fstyles%2Fthemes%2Flight.js
[github.com_xotahal_rea 1]: https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fxotahal%2Freact-native-material-ui%2Fblob%2Fmaster%2Fdocs%2FComponents.md
[github.com_xotahal_rea 2]: https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fxotahal%2Freact-native-material-ui
[github.com_xinthink_re]: https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fxinthink%2Freact-native-material-kit
[github.com_nachos-ui_n]: https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fnachos-ui%2Fnachos-ui
[github.com_wix_react-n]: https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fwix%2Freact-native-ui-lib
[expo.io_satya164_r]: https://link.juejin.im/?target=https%3A%2F%2Fexpo.io%2F%40satya164%2Freact-native-paper-example
[github.com_callstack_r]: https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fcallstack%2Freact-native-paper
[oblador.github.io_react-nativ]: https://link.juejin.im/?target=https%3A%2F%2Foblador.github.io%2Freact-native-vector-icons%2F
[github.com_oblador_rea]: https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Foblador%2Freact-native-vector-icons
[github.com_rilyu_tease]: https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Frilyu%2Fteaset
[https_juejin.im_entry_5b8c9af4e51d453884363e1c]: https://juejin.im/entry/5b8c9af4e51d453884363e1c