React Native常用三方组件库大全

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

PDF

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

更多文章

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容