React Native常用第三方组件汇总

版权声明:欢迎评论 https://blog.csdn.net/halaoda/article/details/80535431

react-native-syan-image-picker 多图上传
react-native-animatable 动画
react-native-carousel 轮播
react-native-torch 闪光灯
react-native-swiper 轮播
react-native-countdown 倒计时
react-native-device-info 设备信息
react-native-fileupload 文件上传
react-native-icons 图标
react-native-triangle 画三角形
react-native-image-picker 图片选择器
react-native-keychain iOS KeyChain管理
react-native-scrollable-tab-view 可滚动标签
react-native-side-menu 侧栏
react-native-check-box CheckBox
react-native-easy-toast 一款简单易用的 Toast 组件,支持 Android&iOS.
react-native-picker 滚轮选择器
react-native-picker-android Android 滚轮选择器
react-native-refreshable-listview 可刷新列表
react-native-video 视频播放
react-native-viewpager 分页浏览
react-native-scrollable-tab-view 可滑动的底部或上部导航栏框架
react-native-tab-navigator 底部或上部导航框架(不可滑动)
react-native-splash-screen 启动白屏问题
react-native-simple-router 简易路由跳转框架
react-native-storage 持久化存储
react-native-sortable-listview 分类ListView
react-native-htmlview 将 HTML 目录作为本地视图的控件,其风格可以定制
react-native-easy-toast 一款简单易用的 Toast 组件,支持 Android&iOS.

选项卡 :
https://github.com/exponentjs/react-native-tab-navigator

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/react-native-fellowship/react-native-side-menu

侧滑按钮:
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/vczero/react-native-calendar

语言转化和一些常用格式转换:
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/reactnativecn/react-native-inputscrollview
https://github.com/wix/react-native-keyboard-aware-scrollview

本地存储:
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相关:
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

加密crypto-js:
https://github.com/brix/crypto-js

将 HTML 目录作为本地视图的控件 react-native-htmlview:
https://github.com/jsdf/react-native-htmlview

rn动画:
http://blog.csdn.net/hello_hwc/article/details/51775696

股票金融类app:
https://github.com/7kfpun/FinanceReactNative

图形表:
https://github.com/wuxudong/react-native-charts-wrapper

好看的日历控件:
https://github.com/wix/react-native-calendars

时间控件:
https://github.com/xgfe/react-native-datepicker

键盘问题:
https://github.com/APSL/react-native-keyboard-aware-scroll-view
https://github.com/douglasjunior/react-native-keyboard-manager
https://github.com/reactnativecn/react-native-inputscrollview

签名:
https://github.com/jgrancher/react-native-sketch

listview回到顶部按钮:
https://github.com/yzsolo/react-native-scrolltotop

摇一摇:
https://github.com/jadsonlourenco/react-native-shake-event

高德地图:
https://github.com/Eleme-IMF/dodo

类似快递流程图:
https://github.com/24ark/react-native-step-indicator

进度条:
https://github.com/Yenole/react-native-easy-loading

0.44后使用navigitor:
http://blog.csdn.net/xiongge2005/article/details/72875478

中文网热更新:
https://github.com/reactnativecn/react-native-pushy/blob/master/docs/guide3.md

图片轮滑查看:
https://github.com/ascoders/react-native-image-viewer

圆形进度图形控件:
https://github.com/bgryszko/react-native-circular-progress

下拉放大:
https://github.com/lelandrichardson/react-native-parallax-view

下来放大同时悬停头部:
https://github.com/jaysoo/react-native-parallax-scroll-view

点击按钮弹出弹窗在你旁边:
https://github.com/jeanregisser/react-native-popover

点击按钮弹窗选择:
https://github.com/sohobloo/react-native-modal-dropdown

时间轴,快递物流:
https://github.com/thegamenicorus/react-native-timeline-listview

rn蓝牙通信:
http://blog.csdn.net/withings/article/details/71378562

弹窗里面是一个listview然后单选:
https://github.com/JamesWatling/react-native-list-view-select

android版本更新:
https://github.com/parryworld/react-native-appupdate

仿ios小圆点全屏拖动:
https://github.com/kiddkai/react-native-gestures

好看的进度条:
https://github.com/joinspontaneous/react-native-loading-spinner-overlay

React-Native-Elements 一组开发RN的UI工具包(强烈推荐):
https://github.com/react-native-training/react-native-elements

react-native-calendars 优秀的日历控件:
https://github.com/wix/react-native-calendars

apsl-react-native-button 定义了一个Button支持用Style来配置 :
https://github.com/APSL/react-native-button

react-native-action-button 支持多种点击事件的Button控件 :
https://github.com/APSL/react-native-button

react-native-button 另一个Button组件 :
https://github.com/ide/react-native-button

ex-navigator 封装Navigator,以Route为中心的Navigator :
https://github.com/expo/ex-navigator

gl-react-native React Native中使用OPENGL来实现复杂的图片和components渲染 :
https://github.com/gre/gl-react-native-v2

react-native-activity-view iOS上的分享和action sheets组件:
https://github.com/naoufal/react-native-activity-view

react-native-app-intro 引导页 :
https://github.com/FuYaoDe/react-native-app-intro

react-native-blur 添加模糊或者毛玻璃效果:
https://github.com/react-native-community/react-native-blur

react-native-calendar 日历 :
https://github.com/christopherdro/react-native-calendar

react-native-chart 绘图(折线图,柱状图,扇形图) :
https://github.com/bgryszko/react-native-circular-progress

react-native-circular-progress 圆形的显示进度的视图 :
https://github.com/bgryszko/react-native-circular-progress

react-native-collapsible 可折叠的component :
https://github.com/oblador/react-native-collapsible

React Native Drawer 抽屉效果,可 用来实现侧拉菜单:
https://github.com/root-two/react-native-drawer

react-native-dropdown下拉菜单 :
https://github.com/alinz/react-native-dropdown

封装了iOS 8上的UIVisualEffectViews,在React Native中实现毛玻璃效果 :
https://github.com/voronianski/react-native-effects-view

react-native-gesture-password 手势解锁,支持iOS和Android :
https://github.com/spikef/react-native-gesture-password

react-native-gifted-form 在React Native中方便的使用表格 :
https://github.com/FaridSafi/react-native-gifted-form

react-native-gifted-listview 下拉刷新和上拉加载的ListView :
https://github.com/FaridSafi/react-native-gifted-listview

react-native-gifted-messenger 方便的实现聊天UI :
https://github.com/FaridSafi/react-native-gifted-chat

react-native-grid-view 网格视图,类似iOS中的UICollectionView :https://github.com/lucholaf/react-native-grid-view

react-native-image-picker 用Native UI来选择图片或者拍照 :
https://github.com/react-community/react-native-image-picker

react-native-keyboard-spacer 适用于iOS的根据键盘自动调整输入框 :
https://github.com/Andr3wHur5t/react-native-keyboard-spacer

react-native-keyboardevents 监听键盘显示/隐藏 :
https://github.com/johanneslumpe/react-native-keyboardevents

react-native-lightbox 图片全屏预览 :
https://github.com/oblador/react-native-lightbox

react-native-looped-carousel 视图轮播 :
https://github.com/phil-r/react-native-looped-carousel

react-native-mapbox-gl 地图 :
https://github.com/mapbox/react-native-mapbox-gl

react-native-maps 地图 :
https://github.com/react-community/react-native-maps

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

react-native-material-kit 一组UI Components,为了介绍 Material Design :
https://github.com/xinthink/react-native-material-kit

react-native-modalbox 用于模态显示的Component :
https://github.com/maxs15/react-native-modalbox

react-native-orientation 监听设备旋转 :
https://github.com/yamill/react-native-orientation

react-native-parallax parallax效果 :
https://github.com/oblador/react-native-parallax

react-native-parallax-scroll-view 视差滚动效果的ScrollView,支持固定header:
https://github.com/i6mi6/react-native-parallax-scroll-view

react-native-picker 选择器,可用于实现时间选择,区域选择 :
https://github.com/beefe/react-native-picker

react-native-popover 弹出气泡框的Component :
https://github.com/jeanregisser/react-native-popover

react-native-progress-hud ProgressHUD :
https://github.com/naoufal/react-native-progress-hud

react-native-refresher 支持下拉刷新的listview :
https://github.com/syrusakbary/react-native-refresher

react-native-router类似Navigator的导航控制器 :
https://github.com/t4t5/react-native-router

react-native-scrollable-tab-view 支持左右滚动的来切换tab的tableview :
https://github.com/happypancake/react-native-scrollable-tab-view

react-native-controllers 封装了 原生的iOS 导航栏,tabbar,抽屉效果等。:
https://github.com/wix/react-native-controllers

react-native-search-bar 封装iOS原生UISearchBar :
https://github.com/umhan35/react-native-search-bar

react-native-spinkit 一组Activity指示器 :
https://github.com/maxs15/react-native-spinkit

react-native-splashscreen App载入视图,启动后自动隐藏 :
https://github.com/remobile/react-native-splashscreen

react-native-svgkit 显示SVG格式图片 :
https://github.com/brentvatne/react-native-svgkit

react-native-swipeout 类似TableViewCell的左滑删除,支持Component滑动 :
https://github.com/dancormier/react-native-swipeout

react-native-swiper 视图轮播,上下/左右滑动组件,类似UICollectionView:
https://github.com/leecade/react-native-swiper

react-native-tableview 封装iOS原生UITableview:
https://github.com/jondot/awesome-react-native

react-native-vector-icons 3000+支持自定义的图标:
https://github.com/oblador/react-native-vector-icons

react-native-sglistview 为了解决React Native中ListView的内存问题 :
https://github.com/sghiassy/react-native-sglistview

react-native-invertible-scroll-view 逆向的ScrollView,适用于 向上滑动来加载更多的情况:
https://github.com/expo/react-native-invertible-scroll-view

react-native-viewpager 视图轮播,支持循环滚动,自定义视图。已做性能优化 :
https://github.com/race604/react-native-viewpager

react-native-tab-navigator TabBar切换视图 :
https://github.com/happypancake/react-native-tab-navigator

react-native-loading-spinner-overlay 加载中的提示spinner ,支持iOS/Android:
https://github.com/joinspontaneous/react-native-loading-spinner-overlay

react-native-color-picker iOS/Android通用的颜色选择器:
https://github.com/instea/react-native-color-picker

react-native-pathjs-charts - 基于react-native-svg 和 paths-js写的iOS,Android通用的绘图库 :
https://github.com/capitalone/react-native-pathjs-charts

react-native-gl-model-view - 显示/动画 Wavefront,.OBJ等3D对象(iOS):
https://github.com/rastapasta/react-native-gl-model-view

react-native-message-bar 在屏幕底部/顶部展示通知:
https://github.com/KBLNY/react-native-message-bar

react-native-fast-image 高性能的图片组件:
https://github.com/DylanVann/react-native-fast-image

react-native-search-box 纯JS写的类似iOS SearchBar的组件:
https://github.com/agiletechvn/react-native-search-box

react-native-splash-screen 当应用程序加载时,它可以在iOS和Android上工作:
https://github.com/crazycodeboy/react-native-splash-screen

rn-placeholder ? 空数据的站位符,很适合用来做列表站位:
https://github.com/mfrachet/rn-placeholder

react-native-css 用CSS的方式对Component进行Style :
https://github.com/sabeurthabti/react-native-css

react-native-extended-stylesheet 对stylesheet进行扩展 :
https://github.com/vitalets/react-native-extended-stylesheet

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

炫酷效果的 TextInput
https://github.com/halilb/react-native-textinput-effects
https://github.com/zbtang/React-Native-TextInputLayout

抽屉效果
https://github.com/root-two/react-native-drawer
https://github.com/react-native-fellowship/react-native-side-menu

侧滑按钮
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/sconxu/react-native-checkbox

提示消息的Bar
https://github.com/KBLNY/react-native-message-bar

照片墙
https://github.com/ldn0x7dc/react-native-gallery

星星
https://github.com/djchie/react-native-star-rating

Text跑马灯效果
https://github.com/remobile/react-native-marquee-label

图片加载进度条
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/react-native-fellowship/react-native-blur

滑动可以收回头部动画的列表
react-native-parallax-scroll-view

下拉选择
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/maxs15/react-native-modalbox
https://github.com/brentvatne/react-native-modal
https://github.com/bodyflex/react-native-simple-modal

按钮特效 react-native-circle-button▼
项目名称:react-native-circle-button功能介绍:可以支持双平台的原型菜单按钮,作者灵感来源于国外设计网站dribbble,虽然可能项目用到的可能性比较小,但是可以看下实现过程。仓库地址:https://github.com/dwicao/react-native-circle-button

酷炫折叠动画 react-native-foldview▼
项目名称:react-native-foldview功能介绍:纯 JS 代码编写的,一个带折叠动画的列表项 UI 组件,可用在滚动列表中,展示列表详情之类的,动画效果也不错。仓库地址:https://github.com/jmurzy/react-native-foldview

这个是一个下拉选项组件
A react-native dropdown/picker/selector component for both Android & iOS.

国人做的,貌似不错,支持个。
react-native-modal-dropdown
cnblog的中文解释

一个比较美丽的提示气泡toast
react-native-root-toast

图片上拉放大:https://github.com/lelandrichardson/react-native-parallax-view

npm install react-native-gifted-form --save
react-native-gifted-form

颜色渐变
npm install react-native-linear-gradient --save
react-native-linear-gradient

npm i react-native-app-intro --save
react-native-app-intro

https://github.com/spikef/react-native-gesture-password
https://github.com/xudafeng/autoresponsive-react-native

下拉打开页面:react-native-accordion

通讯录:react-native-alphabetlistview

自动填充:react-native-alphabetlistview

https://github.com/Dharmoslap/react-native-responsive-image

https://github.com/vczero/react-native-tab-menu

https://github.com/chirag04/react-native-tooltip

https://github.com/aroth/react-native-uploader

https://github.com/Cocoon-break/react-native-table-row

https://github.com/Cocoon-break/react-native-table-row

搜索框,带历史纪录:https://github.com/tuantle/react-native-search-header

下拉警告:https://github.com/testshallpass/react-native-dropdownalert

滑动动画选择:https://github.com/App2Sales/react-native-switch-selector

https://github.com/thegamenicorus/react-native-timeline-listview

猜你喜欢

转载自blog.csdn.net/halaoda/article/details/80535431