你应该知道的11个React Native组件库
2021-12-04 17:59 1165阅读 0赞 <iframe data-google-container-id="a!1" data-google-query-id="CIywmeSM4vsCFYlYDwIdNCgD_Q" data-load-complete="true" frameborder="0" height="0" id="aswift_0" marginheight="0" marginwidth="0" name="aswift_0" scrolling="no" src="https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-3823768843679261&output=html&h=280&slotname=6397814127&adk=1443292817&adf=3884797759&pi=t.ma~as.6397814127&w=764&fwrn=4&fwrnh=100&lmt=1670230313&rafmt=1&format=764x280&url=https%3A%2F%2Fdandelioncloud.cn%2Farticle%2Fdetails%2F1467071018996166657%2F&fwr=0&fwrattr=true&rpe=1&resp_fmts=3&wgl=1&uach=WyJXaW5kb3dzIiwiMTQuMC4wIiwieDg2IiwiIiwiMTA3LjAuMTQxOC42MiIsW10sZmFsc2UsbnVsbCwiNjQiLFtbIk1pY3Jvc29mdCBFZGdlIiwiMTA3LjAuMTQxOC42MiJdLFsiQ2hyb21pdW0iLCIxMDcuMC41MzA0LjE1MCJdLFsiTm90PUE_QnJhbmQiLCIyNC4wLjAuMCJdXSxmYWxzZV0.&dt=1670230215847&bpp=3&bdt=60641&idt=97814&shv=r20221110&mjsv=m202211150101&ptt=9&saldr=aa&abxe=1&cookie=ID%3D5d7551e7265b482a-22d46971a0d800a8%3AT%3D1669283109%3ART%3D1669283109%3AS%3DALNI_MZsRsycR3k9CU-YTpVRMpEQa7QjPg&gpic=UID%3D00000b82de9697a6%3AT%3D1669283109%3ART%3D1669283109%3AS%3DALNI_MaRibR9n7TzQ66qTecPkrVUKsQyLQ&correlator=1854539637363&frm=20&pv=2&ga_vid=452565172.1670230314&ga_sid=1670230314&ga_hid=49393669&ga_fc=0&u_tz=480&u_his=1&u_h=720&u_w=1280&u_ah=672&u_aw=1280&u_cd=24&u_sd=1.5&dmc=8&adx=95&ady=219&biw=1272&bih=601&scr_x=0&scr_y=0&eid=44759875%2C44759926%2C44759837%2C42531706%2C31070993%2C44770880&oid=2&pvsid=437019449209739&tmod=2135875158&wsm=1&uas=0&nvt=1&ref=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3DtLAw7I880U7CPZ9TpAKhAcxu4GTdJo2kqkcYXvobmuAU544IL7VX_Wwf3TNGa3vNliA8fIqfv0qghnB7777FGnLLylf3aO4eMZ_N4DiwWvK%26wd%3D%26eqid%3Dc72496de0006574100000004638db05c&eae=0&fc=896&brdim=1280%2C0%2C1280%2C0%2C1280%2C0%2C1280%2C672%2C1280%2C601&vis=2&rsz=%7C%7CoEer%7C&abl=CS&pfx=0&fu=128&bc=31&ifi=1&uci=a!1&fsb=1&xpc=uLIP8wdevD&p=https%3A//dandelioncloud.cn&dtd=97831" width="764"></iframe>随着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…）。
NativeBase项目地址: github.com/GeekyAnts/N…
可定制主题模板: nativebase.io/nativebase-…
入门套件: reactnativeseed.com/
2. React Native Elements
star数超过12K，是一个高度可定制的跨平台UI工具包，完全用Javascript构建。该库的作者声称“React Native Elements的想法更多的是关于组件结构而不是设计，这意味着在使用某些元素时可以减少样板代码，但可以完全控制它们的设计”，这对于开发新手和经验丰富的老手来说都很有吸引力。这是一个Expo示例应用程序(react-native-training.github.io/react-nativ…)，对它的所有组件进行了演示。
React Native Elements项目地址: github.com/react-nativ…
3. Shoutem
star数在3.5k左右，是一个React Native UI工具包，由3个部分组成：UI组件、主题和组件动画。该库为iOS和Android提供了一组跨平台组件，所有组件都是可组合和可定制的。每个组件还提供了与其他组件一致的预定义样式，这样可以在无需手动定义复杂样式的情况下构建复杂的组件。
Shoutem项目地址：shoutem.github.io/ui/
4. UI Kitten
star数在3K左右，这个库提供了一个可定制和可重复使用的react-native组件工具包，该工具包将样式定义移到特定位置，从而可以单独重用组件或为组件设置样式。通过传递不同的变量，可以很容易地“动态”改变主题样式。这里有一个很好的Expo示例应用程序（expo.io/@akveo/ui-k…）。
UI Kitten项目地址: 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…）。
React Native Material UI项目地址: github.com/xotahal/rea…
6. React Native Material Kit
star数4K左右，虽然最后一次NPM发布是在2017年12月，但这个库仍然值得一提，它提供了一套基本但很有用的UI组件和主题，实现了谷歌的Material Design。为什么要用它？因为它简单实用。但因为维护不是很活跃，所以请谨慎考虑是否采用。
React Native Material Kit项目地址: 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…
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…
9. React Native Paper
star数1.5K左右，是一个跨平台的UI组件库，它遵循Material Design指南，提供了全局主题支持和可选的babel插件，用以减少捆绑包大小。这里是一个Expo示例应用程序，可帮你快速了解这个库（expo.io/@satya164/r…）。
React Native Paper项目地址: 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…）。
React Native Vector Icons项目地址: github.com/oblador/rea…
11. Teaset
star数1.3K左右，是一个React Native UI库，提供了20多个纯JS（ES6）组件，用于内容显示和动作控制。虽然它的文档不够详尽，但它简洁的设计吸引了我的眼球。
Teaset项目地址: github.com/rilyu/tease…
转载自：https://juejin.im/entry/5b8c9af4e51d453884363e1c
标签：11,github,React,UI,组件,com,Native From： https://www.cnblogs.com/sexintercourse/p/16954056.html