React Native常用三方组件库大全

15,545 阅读5分钟

React Native开发中常用三方组件大全

作者整理的一套常用的React Native开发中使用到的三方组件库大全,后续也会持续更新,同学们如果发现有好用的组件但是文章中没有列出的,也请给作者留言告知组件名称,作者好将读者们反馈的组件添加到文章中,以便帮助更多的RN开发者。后续持续更新的三方组件会放到文章的开头部分,代表是新追加的组件,小伙伴们请知晓!

如果小伙伴们想学习React Native 框架的搭建以及Redux框架的学习使用,可以参考作者的开源项目OneM: github.com/guangqiang-… 记得给个 star

当然也欢迎小伙伴们加入作者的React Native实战开发QQ交流群:620792950, 开发中遇到的问题可以在群里随意的提问,互相交流学习。

react-native -30 (每天一个Demo,共三十个,有些demo很不错哦)

github.com/fangwei716/…

  • 拖动九宫格
    https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/screenshots/screenshot/day18.gif
  • 手势解锁
    https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/screenshots/screenshot/day16.gif

自动管理Timer组件

此组件目前只支持ES5 语法,ES6语法请在componentWillUnmount() 中清除timer

github.com/reactjs/rea…

蚂蚁金服组件库 antd-mobile

github.com/ant-design/…

react-native-button

github.com/ide/react-n…

点击图片放大缩小

github.com/ascoders/re…

进度组件

github.com/oblador/rea…

[图片上传失败...(image-8658f8-1511425885032)]

路由组件react-native-router-flux

github.com/aksonov/rea…

简单的storage封装

github.com/jasonmerino…

tabBar组件react-native-tab-navigator

github.com/happypancak…

iconFont组件

github.com/oblador/rea…

分页组件 react-native-viewpager

github.com/race604/rea…

导航组件 react-navigation

github.com/react-commu…

动画

github.com/oblador/rea…

轮播

github.com/nick/react-…

倒计时

github.com/buhe/react-…

设备信息

react-native-device-info

github.com/rebeccahugh…

文件上传

react-native-fileupload

github.com/PhilippKron…

图标

github.com/corymsmith/…

github.com/oblador/rea…

图片选择器

react-native-image-picker

github.com/react-commu…

iOS KeyChain管理

react-native-keychain

github.com/oblador/rea…

滚轮选择器

react-native-picker

github.com/beefe/react…

[图片上传失败...(image-689a68-1511950421120)]

Android 滚轮选择器

react-native-picker-Android

github.com/beefe/react…

可刷新列表

react-native-refreshable-listview

github.com/jsdf/react-…

可滚动标签

react-native-scrollable-tab-view

github.com/skv-headles…

侧栏

react-native-side-menu

github.com/react-nativ…

轮播

react-native-swiper

github.com/leecade/rea…

音视频播放

react-native-video

github.com/react-nativ…

分页浏览

react-native-viewpager

github.com/race604/rea…

可滑动的底部或上部导航栏框架

react-native-scrollable-tab-view

github.com/skv-headles…

底部或上部导航框架(不可滑动)

react-native-tab-navigator

github.com/happypancak…

CheckBox

react-native-check-box

github.com/crazycodebo…

启动白屏问题

react-native-splash-screen

github.com/crazycodebo…

简易路由跳转框架

react-native-simple-router

github.com/react-nativ…

持久化存储

react-native-storage

github.com/sunnylqm/re…

分类ListView

react-native-sortable-listview

github.com/deanmcphers…

将 HTML 目录作为本地视图的控件,其风格可以定制

react-native-htmlview

github.com/jsdf/react-…

Toast

react-native-easy-toast

github.com/crazycodebo…

material组件库(各种漂亮的小组件)

github.com/xinthink/re…

base组件库(各种封装不错的小组件)

nativebase.io/docs/v0.4.6… github.com/GeekyAnts/N…

按钮

github.com/mastermoo/r… github.com/ide/react-n…

输入框表单验证

github.com/gcanti/tcom… github.com/FaridSafi/r… github.com/bartonhammo…

炫酷效果的 TextInput

github.com/halilb/reac… github.com/zbtang/Reac…

聊天

github.com/FaridSafi/r…

地图

github.com/lelandricha…

动画

github.com/oblador/rea…

加载动画

github.com/maxs15/reac…

抽屉效果

github.com/root-two/re…

侧滑按钮

github.com/dancormier/… github.com/jemise111/r…

图表

github.com/tomauty/rea…

下拉放大

github.com/lelandricha…

可滑动的日历组件

github.com/cqm1994617/…

语言转化和一些常用格式转换

github.com/joshswan/re…

单选多选ListView

github.com/hinet/react…

选择按钮

github.com/sconxu/reac…

二维码

github.com/ideacreatio…

制作本地库

github.com/frostney/re…

影音相关

github.com/MisterAlex9…

安卓录音

github.com/bosung90/re…

提示消息的Bar

github.com/KBLNY/react…

iOS原生TableView

github.com/aksonov/rea…

点击弹出视图

github.com/jeanregisse… github.com/instea/reac…

3D Touch

github.com/madriska/re…

双平台兼容的ActionSheet

github.com/beefe/react…

照片墙

github.com/ldn0x7dc/re…

键盘遮挡问题

github.com/wix/react-n… github.com/reactnative…

本地存储

github.com/sunnylqm/re…

星星

github.com/djchie/reac…

国际化

github.com/joshswan/re…

扫描二维码

github.com/lazaronixon…

通讯录

github.com/rt2zz/react…

加密

www.npmjs.com/package/cry…

缓存管理

github.com/reactnative…

ListView的优化

github.com/sghiassy/re…

图片和base64互转

github.com/xfumihiro/r…

安卓 iOS 白屏解决

github.com/mehcode/rn-…

Text跑马灯效果

github.com/remobile/re…

清除按钮的输入框

github.com/beefe/react…

webView-bridge相关

github.com/alinz/react…

判断横竖屏

github.com/yamill/reac…

PDF

github.com/cnjon/react…

获取设备信息

github.com/rebeccahugh…

手势放大缩小移动

github.com/kiddkai/rea… github.com/johanneslum…

下拉-上拉-刷新

github.com/FaridSafi/r… github.com/jsdf/react-… github.com/greatbsky/r…

下拉选择

github.com/alinz/react…

图片查看

github.com/oblador/rea…

照片选择

github.com/marcshillin… github.com/ivpusic/rea…

图片加载进度条

github.com/oblador/rea…

轮播视图

github.com/race604/rea… github.com/FuYaoDe/rea… github.com/appintheair… github.com/leecade/rea…

模态视图

github.com/maxs15/reac… github.com/brentvatne/… github.com/bodyflex/re…

毛玻璃效果

github.com/react-nativ…

头像库

github.com/oblador/rea…

滑动选项卡

github.com/skv-headles…

文件上传

github.com/aroth/react…

gif

动画

github.com/oblador/rea…

gif

图标

github.com/oblador/rea…

gif

图片选择器(可多选)

github.com/ivpusic/rea…

滚轮选择器

github.com/beefe/react…

下拉刷新listview

github.com/jsdf/react-…

[图片上传失败...(image-86b334-1511425885032)]

可滚动Tab

github.com/skv-headles…

侧栏

github.com/react-nativ…

图片轮播

github.com/leecade/rea…

CheckBox

github.com/crazycodebo…

Toast

github.com/crazycodebo…

各种漂亮的小组件

github.com/xinthink/re…

base组件库

github.com/GeekyAnts/N…

按钮

github.com/mastermoo/r…

炫酷效果的 TextInput

github.com/halilb/reac… github.com/zbtang/Reac…

聊天

github.com/FaridSafi/r…

百度地图

github.com/lovebing/re… www.jianshu.com/p/eceb7e66f…

加载动画

github.com/maxs15/reac…

侧滑按钮

github.com/dancormier/… github.com/jemise111/r…

图表

github.com/wuxudong/re…

下拉放大

github.com/lelandricha…

[图片上传失败...(image-9dccb8-1511425885033)]

可滑动的日历组件

github.com/cqm1994617/…

提示消息的Bar

github.com/KBLNY/react…

点击弹出视图

github.com/jeanregisse…

3D Touch

github.com/madriska/re…

双平台兼容的ActionSheet

github.com/beefe/react…

图片加载进度条

github.com/oblador/rea…

模态视图

github.com/maxs15/reac… github.com/bodyflex/re…

毛玻璃效果

github.com/react-nativ…

按钮特效

github.com/dwicao/reac…

折叠动画

github.com/jmurzy/reac…

方块滚动轮播图

github.com/archriss/re…

下拉选项组件

github.com/sohobloo/re…

提示气泡toast

github.com/magicismigh…

From表单

github.com/FaridSafi/r…

线性渐变颜色

link.jianshu.com/?t=https://…

app 引导页

github.com/fuyaode/rea…

手势解锁密码

link.jianshu.com/?t=https://…

瀑布流列表

github.com/xudafeng/au…

折叠列表

github.com/naoufal/rea…

通讯录

github.com/i6mi6/react…

多级菜单

github.com/vczero/reac…

image

tip提示框

github.com/chirag04/re…

image

pdf文件上传

link.jianshu.com/?t=https://… github.com/christopher…

上传doc文档

github.com/philipphech…

列表滑动删除

github.com/jemise111/r…

image

IM聊天界面

github.com/Ice-MT/reac…

image

更多文章

  • 作者React Native开源项目OneM【500+ star】地址(按照企业开发标准搭建框架完成开发的):github.com/guangqiang-…:欢迎小伙伴们 star
  • 作者简书主页:包含60多篇RN开发相关的技术文章www.jianshu.com/u/023338566… 欢迎小伙伴们:多多关注多多点赞
  • 作者React Native QQ技术交流群:620792950 欢迎小伙伴进群交流学习
  • 友情提示:在开发中有遇到RN相关的技术问题,欢迎小伙伴加入交流群(620792950),在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家,谢谢大家支持!

小伙伴们扫下方二维码加入RN技术交流QQ群

QQ群二维码,500+ RN工程师在等你加入哦