React Native开发中常用三方组件大全
作者整理的一套常用的React Native开发中使用到的三方组件库大全，后续也会持续更新，同学们如果发现有好用的组件但是文章中没有列出的，也请给作者留言告知组件名称，作者好将读者们反馈的组件添加到文章中，以便帮助更多的RN开发者。后续持续更新的三方组件会放到文章的开头部分，代表是新追加的组件，小伙伴们请知晓！
如果小伙伴们想学习React Native 框架的搭建以及Redux框架的学习使用，可以参考作者的开源项目OneM: https://github.com/guangqiang-liu/OneM 记得给个 star 哦
当然也欢迎小伙伴们加入作者的React Native实战开发QQ交流群:620792950, 开发中遇到的问题可以在群里随意的提问，互相交流学习。
react-native -30 (每天一个Demo，共三十个，有些demo很不错哦)
https://github.com/fangwei716/30-days-of-react-native
-
拖动九宫格
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
https://github.com/reactjs/react-timer-mixin
蚂蚁金服组件库 antd-mobile
https://github.com/ant-design/ant-design-mobile
react-native-button
https://github.com/ide/react-native-button
点击图片放大缩小
https://github.com/ascoders/react-native-image-viewer
进度组件
https://github.com/oblador/react-native-progress
[图片上传失败...(image-8658f8-1511425885032)]
路由组件react-native-router-flux
https://github.com/aksonov/react-native-router-flux
简单的storage封装
https://github.com/jasonmerino/react-native-simple-store
tabBar组件react-native-tab-navigator
https://github.com/happypancake/react-native-tab-navigator
iconFont组件
https://github.com/oblador/react-native-vector-icons
分页组件 react-native-viewpager
https://github.com/race604/react-native-viewpager
导航组件 react-navigation
https://github.com/react-community/react-navigation
动画
https://github.com/oblador/react-native-animatable
轮播
https://github.com/nick/react-native-carousel
倒计时
https://github.com/buhe/react-native-countdown
设备信息
react-native-device-info
https://github.com/rebeccahughes/react-native-device-info
文件上传
react-native-fileupload
https://github.com/PhilippKrone/react-native-fileupload
图标
https://github.com/corymsmith/react-native-icons
https://github.com/oblador/react-native-vector-icons
图片选择器
react-native-image-picker
https://github.com/react-community/react-native-image-picker
iOS KeyChain管理
react-native-keychain
https://github.com/oblador/react-native-keychain
滚轮选择器
react-native-picker
https://github.com/beefe/react-native-picker
[图片上传失败...(image-689a68-1511950421120)]
Android 滚轮选择器
react-native-picker-Android
https://github.com/beefe/react-native-picker-android
可刷新列表
react-native-refreshable-listview
https://github.com/jsdf/react-native-refreshable-listview
可滚动标签
react-native-scrollable-tab-view
https://github.com/skv-headless/react-native-scrollable-tab-view
侧栏
react-native-side-menu
https://github.com/react-native-community/react-native-side-menu
轮播
react-native-swiper
https://github.com/leecade/react-native-swiper
音视频播放
react-native-video
https://github.com/react-native-community/react-native-video
分页浏览
react-native-viewpager
https://github.com/race604/react-native-viewpager
可滑动的底部或上部导航栏框架
react-native-scrollable-tab-view
https://github.com/skv-headless/react-native-scrollable-tab-view
底部或上部导航框架(不可滑动)
react-native-tab-navigator
https://github.com/happypancake/react-native-tab-navigator
CheckBox
react-native-check-box
https://github.com/crazycodeboy/react-native-check-box
启动白屏问题
react-native-splash-screen
https://github.com/crazycodeboy/react-native-splash-screen
简易路由跳转框架
react-native-simple-router
https://github.com/react-native-simple-router-community/react-native-simple-router
持久化存储
react-native-storage
https://github.com/sunnylqm/react-native-storage
分类ListView
react-native-sortable-listview
https://github.com/deanmcpherson/react-native-sortable-listview
将 HTML 目录作为本地视图的控件，其风格可以定制
react-native-htmlview
https://github.com/jsdf/react-native-htmlview
Toast
react-native-easy-toast
https://github.com/crazycodeboy/react-native-easy-toast
material组件库（各种漂亮的小组件）
https://github.com/xinthink/react-native-material-kit
base组件库（各种封装不错的小组件）
http://nativebase.io/docs/v0.4.6/components#anatomy
https://github.com/GeekyAnts/NativeBase
按钮
https://github.com/mastermoo/react-native-action-button
https://github.com/ide/react-native-button
输入框表单验证
https://github.com/gcanti/tcomb-form-native
https://github.com/FaridSafi/react-native-gifted-form
https://github.com/bartonhammond/snowflake
炫酷效果的 TextInput
https://github.com/halilb/react-native-textinput-effects
https://github.com/zbtang/React-Native-TextInputLayout
聊天
https://github.com/FaridSafi/react-native-gifted-chat
地图
https://github.com/lelandrichardson/react-native-maps
动画
https://github.com/oblador/react-native-animatable
加载动画
https://github.com/maxs15/react-native-spinkit
抽屉效果
https://github.com/root-two/react-native-drawer
侧滑按钮
https://github.com/dancormier/react-native-swipeout
https://github.com/jemise111/react-native-swipe-list-view
图表
https://github.com/tomauty/react-native-chart
下拉放大
https://github.com/lelandrichardson/react-native-parallax-view
可滑动的日历组件
https://github.com/cqm1994617/react-native-myCalendar
语言转化和一些常用格式转换
https://github.com/joshswan/react-native-globalize
单选多选ListView
https://github.com/hinet/react-native-checkboxlist
选择按钮
https://github.com/sconxu/react-native-checkbox
二维码
https://github.com/ideacreation/react-native-barcodescanner
制作本地库
https://github.com/frostney/react-native-create-library
影音相关
https://github.com/MisterAlex95/react-native-record-sound
安卓录音
https://github.com/bosung90/react-native-audio-android
提示消息的Bar
https://github.com/KBLNY/react-native-message-bar
iOS原生TableView
https://github.com/aksonov/react-native-tableview
点击弹出视图
https://github.com/jeanregisser/react-native-popover
https://github.com/instea/react-native-popup-menu
3D Touch
https://github.com/madriska/react-native-quick-actions
双平台兼容的ActionSheet
https://github.com/beefe/react-native-actionsheet
照片墙
https://github.com/ldn0x7dc/react-native-gallery
键盘遮挡问题
https://github.com/wix/react-native-keyboard-aware-scrollview
https://github.com/reactnativecn/react-native-inputscrollview
本地存储
https://github.com/sunnylqm/react-native-storage
星星
https://github.com/djchie/react-native-star-rating
国际化
https://github.com/joshswan/react-native-globalize
扫描二维码
https://github.com/lazaronixon/react-native-qrcode-reader
通讯录
https://github.com/rt2zz/react-native-contacts
加密
https://www.npmjs.com/package/crypto-js
缓存管理
https://github.com/reactnativecn/react-native-http-cache
ListView的优化
https://github.com/sghiassy/react-native-sglistview
图片和base64互转
https://github.com/xfumihiro/react-native-image-to-base64
安卓 iOS 白屏解决
https://github.com/mehcode/rn-splash-screen
Text跑马灯效果
https://github.com/remobile/react-native-marquee-label
清除按钮的输入框
https://github.com/beefe/react-native-textinput
webView-bridge相关
https://github.com/alinz/react-native-webview-bridge
判断横竖屏
https://github.com/yamill/react-native-orientation
https://github.com/cnjon/react-native-pdf-view
获取设备信息
https://github.com/rebeccahughes/react-native-device-info
手势放大缩小移动
https://github.com/kiddkai/react-native-gestures
https://github.com/johanneslumpe/react-native-gesture-recognizers
下拉-上拉-刷新
https://github.com/FaridSafi/react-native-gifted-listview
https://github.com/jsdf/react-native-refreshable-listview
https://github.com/greatbsky/react-native-pull/wiki
下拉选择
https://github.com/alinz/react-native-dropdown
图片查看
https://github.com/oblador/react-native-lightbox
照片选择
https://github.com/marcshilling/react-native-image-picker
https://github.com/ivpusic/react-native-image-crop-picker
图片加载进度条
https://github.com/oblador/react-native-image-progress
轮播视图
https://github.com/race604/react-native-viewpager
https://github.com/FuYaoDe/react-native-app-intro
https://github.com/appintheair/react-native-looped-carousel
https://github.com/leecade/react-native-swiper
模态视图
https://github.com/maxs15/react-native-modalbox
https://github.com/brentvatne/react-native-modal
https://github.com/bodyflex/react-native-simple-modal
毛玻璃效果
https://github.com/react-native-fellowship/react-native-blur
头像库
https://github.com/oblador/react-native-vector-icons
滑动选项卡
https://github.com/skv-headless/react-native-scrollable-tab-view
文件上传
https://github.com/aroth/react-native-uploader
gif
动画
https://github.com/oblador/react-native-animatable
gif
图标
https://github.com/oblador/react-native-vector-icons
gif
图片选择器（可多选）
https://github.com/ivpusic/react-native-image-crop-picker
滚轮选择器
https://github.com/beefe/react-native-picker
下拉刷新listview
https://github.com/jsdf/react-native-refreshable-listview
[图片上传失败...(image-86b334-1511425885032)]
可滚动Tab
https://github.com/skv-headless/react-native-scrollable-tab-view
侧栏
https://github.com/react-native-community/react-native-side-menu
图片轮播
https://github.com/leecade/react-native-swiper
CheckBox
https://github.com/crazycodeboy/react-native-check-box
Toast
https://github.com/crazycodeboy/react-native-easy-toast
各种漂亮的小组件
https://github.com/xinthink/react-native-material-kit
base组件库
https://github.com/GeekyAnts/NativeBase
按钮
https://github.com/mastermoo/react-native-action-button
炫酷效果的 TextInput
https://github.com/halilb/react-native-textinput-effects
https://github.com/zbtang/React-Native-TextInputLayout
聊天
https://github.com/FaridSafi/react-native-gifted-chat
百度地图
https://github.com/lovebing/react-native-baidu-map
http://www.jianshu.com/p/eceb7e66fa5e
加载动画
https://github.com/maxs15/react-native-spinkit
侧滑按钮
https://github.com/dancormier/react-native-swipeout
https://github.com/jemise111/react-native-swipe-list-view
图表
https://github.com/wuxudong/react-native-charts-wrapper
下拉放大
https://github.com/lelandrichardson/react-native-parallax-view
[图片上传失败...(image-9dccb8-1511425885033)]
可滑动的日历组件
https://github.com/cqm1994617/react-native-myCalendar
提示消息的Bar
https://github.com/KBLNY/react-native-message-bar
点击弹出视图
https://github.com/jeanregisser/react-native-popover
3D Touch
https://github.com/madriska/react-native-quick-actions
双平台兼容的ActionSheet
https://github.com/beefe/react-native-actionsheet
图片加载进度条
https://github.com/oblador/react-native-image-progress
模态视图
https://github.com/maxs15/react-native-modalbox
https://github.com/bodyflex/react-native-simple-modal
毛玻璃效果
https://github.com/react-native-community/react-native-blur
按钮特效
https://github.com/dwicao/react-native-circle-button
折叠动画
https://github.com/jmurzy/react-native-foldview
方块滚动轮播图
https://github.com/archriss/react-native-snap-carousel
下拉选项组件
https://github.com/sohobloo/react-native-modal-dropdown
提示气泡toast
https://github.com/magicismight/react-native-root-toast
From表单
https://github.com/FaridSafi/react-native-gifted-form
线性渐变颜色
https://link.jianshu.com/?t=https://github.com/brentvatne/react-native-linear-gradient
app 引导页
https://github.com/fuyaode/react-native-app-intro
手势解锁密码
https://link.jianshu.com/?t=https://github.com/spikef/react-native-gesture-password
瀑布流列表
https://github.com/xudafeng/autoresponsive-react-native
折叠列表
https://github.com/naoufal/react-native-accordion
通讯录
https://github.com/i6mi6/react-native-alphabetlistview
多级菜单
https://github.com/vczero/react-native-tab-menu
image
tip提示框
https://github.com/chirag04/react-native-tooltip
image
pdf文件上传
https://link.jianshu.com/?t=https://github.com/wonday/react-native-pdf
https://github.com/christopherdro/react-native-html-to-pdf
上传doc文档
https://github.com/philipphecht/react-native-doc-viewer
列表滑动删除
https://github.com/jemise111/react-native-swipe-list-view
image
IM聊天界面
https://github.com/Ice-MT/react-native-imUI
image
福利时间
- 作者React Native开源项目OneM地址(按照企业开发标准搭建框架完成开发的)：https://github.com/guangqiang-liu/OneM (欢迎小伙伴们 star)
- 作者简书主页：包含50多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5 (欢迎小伙伴们：多多关注，多多点赞)
- 作者React Native QQ技术交流群：620792950 欢迎小伙伴进群交流学习
- 友情提示：在开发中有遇到RN相关的技术问题，欢迎小伙伴加入交流群（620792950），在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家，谢谢支持！
网友评论