微信号:frontshow

介绍:InfoQ大前端技术社群:囊括前端、移动、Node全栈一线技术,紧跟业界发展步伐。

2018年,你需要了解这些React Native组件库

2018-08-17 18:06 无明 译
作者|Jonathan Saring
译者|无明
编辑|覃云
随着 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 提供了一组跨平台组件,所有组件都是可组合和可定制的。每个组件还提供了与其他组件一致的预定义样式,这样可以在无需手动定义复杂样式的情况下构建复杂的组件。

项目地址:https://shoutem.github.io/ui/

4. UI Kitten

star 数在 3K 左右,这个库提供了一个可定制和可重复使用的 react-native 组件工具包,该工具包将样式定义移到特定位置,从而可以单独重用组件或为组件设置样式。通过传递不同的变量,可以很容易地“动态”改变主题样式。

这里有一个很好的 Expo 示例应用程序:

https://expo.io/@akveo/ui-kitten-explorer-app

项目地址: 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。为什么要用它?因为它简单实用。但因为维护不是很活跃,所以请谨慎考虑是否采用。

项目地址: https://github.com/xinthink/react-native-material-kit

7. Nachos UI

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

项目地址: 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 等。

项目地址: 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/

项目地址: https://github.com/oblador/react-native-vector-icons

11. Teaset

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

项目地址: https://github.com/rilyu/teaset

特别推荐

这里还有一些可能很有用的库,但其中一些已经停止更新,所以请谨慎考虑要不要采用。

  Trixieapp/react-virgin

描述:它是正在寻找的 react-native UI Kit。

地址:https://github.com/Trixieapp/react-virgin

  infinitered/ignite

描述:最热门的 React Native CLI 工具,可用于生成模板代码、插件、生成器等。

地址:https://github.com/infinitered/ignite

  bartonhammond/snowflake

描述:一个 React-Native 项目启动框架,提供模板代码、Redux、RN Router 等示例。

地址:https://github.com/bartonhammond/snowflake

  panza-org/panza

描述:react-native 无状态函数式 UI 组件,可帮助你快速构建和运行项目。

地址:https://github.com/panza-org/panza

  binggg/mrn

描述:Material React Native(MRN)——Material 设计风格的 React Native 组件库。

地址:https://github.com/binggg/mrn

  Facebook Design-iOS 10 iPhone GUI

描述:iOS 10 公开版的 GUI 元素模板,包括 Sketch、Photoshop、Figma、XD 和 Craft。

地址:https://facebook.design/ios10

  wix/react-native-calendars

描述:React Native 日历组件。

地址:https://github.com/wix/react-native-calendars

  oblador/react-native-progress

描述:使用 ReactART 的 React Native 的进度指示器和微调器。

地址:https://github.com/oblador/react-native-progress

  maxs15/react-native—spinkit

描述:React Native 的动画加载指示器集合。

地址:https://github.com/maxs15/react-native-spinkit

  react-community/lottie-react-native

描述:React Native 的 Lottie 包装器。

地址:https://github.com/react-community/lottie-react-native

  react-native-material-design

描述:用于 Material Design 的 React Native UI 组件。

地址:https://github.com/react-native-material-design/react-native-material-design

  英文原文

https://blog.bitsrc.io/11-react-native-component-libraries-you-should-know-in-2018-71d2a8e33312

  课程推荐

推荐给你极客时间火爆专栏 --《深入拆解 Java 虚拟机》,作者为 Oracle Labs 高级研究员,已突破 1w+订阅。四大模块,覆盖 JVM 所有知识点,带你全方位拆解 JVM,系统学习 Java 性能分析、调优,掌握进阶必备技能!

扫码,即可试读此专栏的前三篇文章。

 
前端之巅 更多文章 专访尤雨溪:先别管4.0了,Vue CLI重构了解一下 Chrome十周年版更新了,你第一次用它是什么时候? 用实例告诉你如何重构带有坏味道的代码 Web性能分析工具WebpageTest详解 谷歌推出最新AngularJS升级工具,可快速迁移至Angular
猜您喜欢 第七届FreeSWITCH夏季技术沙龙即将在郑州举行 中小银行的IT厂商生意点在哪?得应用者得天下! 课程丨北美Offer一站解决,全栈软件工程师直通车(免费第一节课报名倒计时) [Android] 防止连续点击打开两个重复页面的小技巧 神兽单车CEO车不错先生专访