collect some react-native-thirdparty 收集了一些RN的第三方组件集合 http://www.jianshu.com/p/53ff78168acc
#收录一些好用的第三方组件,以方便日常的使用,大家有什么推荐的也可以跟我说,我加进去。如有冒犯,可以联系我删除,O(∩_∩)O谢谢。我发现有什么新的也会更新进去。 github的地址在这,同步更新.欢迎点亮星星哈.
React Native 项目常用第三方组件汇总:
自己封的组件,用在tabbar上面的动画哈,用在其他地方也是可以的,欢迎star 🔥🔥🔥🔥 react-native-tabbar-animated 🔥🔥🔥🔥
- react-native-animatable 封装了很多动画
- react-native-safari-view 封装iOS中的 Safari View Controller 🔥
- react-native-webview-android 封装了Android中的Webview 🔥
- react-native-webrtc A WebRTC module for React Native. 🔥🔥
- storybook 🔥🔥🔥🔥🔥 为React和React Native提供交互式开发和测试环境
- awesome-react-native 老外搜集的优秀的React Native文章,库(资料很全)🔥🔥🔥🔥🔥
- react-native-guide 一国内小哥搜集的React Native的参考资料 🔥🔥🔥🔥🔥
- React-native组件库js.coach 🔥🔥🔥🔥🔥
- React Native Package Manager 🔥🔥🔥🔥🔥
- react-native-desktop 为MacOS开发提供的React Native开发包 🔥🔥🔥🔥🔥
- tcomb-form-native 生成React native froms 🔥🔥🔥🔥
- React Native training Github Book,入门级资料 🔥🔥
- pepperoni-app-kit React Native App 开发的一组通用组件 🔥🔥🔥🔥
- haul 辅助开发React Native的命令行工具 🔥🔥🔥🔥
- react-native-rename 命令行重命名App名称
- [native-starter-kit]((https://github.com/start-react/native-starter-kit) React Native + NativeBase + React Navigation + Redux + CodePush (iOS & Android) 开发的App
- React-Native-Elements 一组开发RN的UI工具包(强烈推荐) 🔥🔥🔥🔥🔥
- react-native-calendars 🔥🔥🔥🔥 优秀的日历控件
- apsl-react-native-button 定义了一个Button支持用Style来配置 🔥🔥
- react-native-action-button 支持多种点击事件的Button控件 🔥🔥
- react-native-button 另一个Button组件 🔥🔥
- ex-navigator 封装Navigator,以Route为中心的Navigator 🔥🔥
- gl-react-native React Native中使用OPENGL来实现复杂的图片和components渲染 🔥🔥🔥
- react-native-activity-view iOS上的分享和action sheets组件 🔥🔥
- react-native-app-intro 引导页 🔥🔥
- react-native-blur 添加模糊或者毛玻璃效果 🔥🔥🔥
- react-native-calendar 日历 🔥
- react-native-chart 绘图(折线图,柱状图,扇形图) 🔥🔥🔥
- react-native-circular-progress 圆形的显示进度的视图 🔥
- react-native-collapsible 可折叠的component 🔥
- React Native Drawer 抽屉效果,可 用来实现侧拉菜单 🔥🔥🔥
- react-native-dropdown下拉菜单 🔥
- ReactNativeEffectsView 封装了iOS 8上的UIVisualEffectViews,在React Native中实现毛玻璃效果 🔥
- react-native-gesture-password 手势解锁,支持iOS和Android 🔥
- react-native-gifted-form 在React Native中方便的使用表格 🔥🔥
- react-native-gifted-listview 下拉刷新和上拉加载的ListView 🔥🔥
- react-native-gifted-messenger 方便的实现聊天UI 🔥🔥🔥🔥
- react-native-grid-view 网格视图,类似iOS中的UICollectionView 🔥
- react-native-image-picker 用Native UI来选择图片或者拍照 🔥🔥🔥
- react-native-keyboard-spacer 适用于iOS的根据键盘自动调整输入框 🔥🔥
- react-native-keyboardevents 监听键盘显示/隐藏 🔥
- react-native-lightbox 图片全屏预览 🔥🔥🔥
- react-native-looped-carousel 视图轮播 🔥🔥
- react-native-mapbox-gl 地图 🔥🔥
- react-native-maps 地图 🔥🔥🔥🔥
- react-native-material-design material design 🔥🔥🔥
- react-native-material-kit 一组UI Components,为了介绍 Material Design 🔥🔥🔥🔥
- react-native-modalbox 用于模态显示的Component 🔥🔥
- react-native-orientation 监听设备旋转 🔥
- react-native-parallax parallax效果 🔥
- react-native-parallax-scroll-view 视差滚动效果的ScrollView,支持固定header
- react-native-picker 选择器,可用于实现时间选择,区域选择 🔥
- react-native-popover 弹出气泡框的Component 🔥
- react-native-progress-hud ProgressHUD 🔥
- react-native-refresher 支持下拉刷新的listview 🔥🔥
- react-native-router类似Navigator的导航控制器 🔥🔥🔥🔥
- react-native-scrollable-tab-view 支持左右滚动的来切换tab的tableview 🔥🔥🔥🔥
- react-native-controllers 封装了 原生的iOS 导航栏,tabbar,抽屉效果等。 🔥🔥
- react-native-search-bar 封装iOS原生UISearchBar 🔥🔥
- react-native-spinkit 一组Activity指示器 🔥🔥
- react-native-splashscreen App载入视图,启动后自动隐藏 🔥
- react-native-svgkit 显示SVG格式图片 🔥🔥
- react-native-swipeout 类似TableViewCell的左滑删除,支持Component滑动 🔥🔥🔥
- react-native-swiper 视图轮播,上下/左右滑动组件,类似UICollectionView 🔥🔥🔥🔥
- react-native-tableview 封装iOS原生UITableview
- react-native-vector-icons 3000+支持自定义的图标 🔥🔥🔥🔥
- react-native-sglistview 为了解决React Native中ListView的内存问题 🔥
- react-native-invertible-scroll-view 逆向的ScrollView,从底部开始布局,适用于聊天等向上滑动来加载更多的情况 🔥
- react-native-viewpager 视图轮播,支持循环滚动,自定义视图。已做性能优化 🔥🔥🔥
- react-native-tab-navigator TabBar切换视图 🔥🔥
- react-native-loading-spinner-overlay 加载中的提示spinner 🔥,支持iOS/Android
- react-native-color-picker iOS/Android通用的颜色选择器
- react-native-pathjs-charts - 基于react-native-svg 和 paths-js写的iOS,Android通用的绘图库 🔥
- react-native-gl-model-view - 显示/动画 Wavefront,.OBJ等3D对象(iOS)
- [react-native-message-bar]((https://github.com/KBLNY/react-native-message-bar) 在屏幕底部/顶部展示通知
- react-native-fast-image 高性能的图片组件
- react-native-search-box 纯JS写的类似iOS SearchBar的组件
- react-native-splash-screen A splash screen for react-native, hide when application loaded ,it works on iOS and Android. 🔥🔥🔥🔥
- rn-placeholder 🔥 空数据的站位符,很适合用来做列表站位
- react-native-markdown 支持markdown的component 🔥
- react-native-mock 一个为ReactNative提供的测试框架 🔥🔥
- react-native-google-analytics google统计分析 🔥
- react-native-fabric 统计分析,崩溃分析等 🔥🔥
- react-native-macos 为mac OS服务的React Native
- react-native-wechat 调用微信相关,比如分享,登录,支付 🔥🔥
- reactotron 在终端检测React Dom和Reactive App 🔥🔥🔥
- react-native-windows Windows平台的RN工具 🔥🔥🔥
- react-native-webpack-server 用Webpack来编译React Native App
- aws-sdk-react-native AWS的官方SDK 🔥🔥
- react-native-device-info 获取设备信息 🔥🔥
- react-native-barcodescanner 扫码 🔥
- react-native-contacts 访问通讯录 🔥
- react-native-fs 访问本地文件系统 🔥🔥
- react-native-push-notification 本地和远程通知 🔥🔥
- react-native-touch-id 调用TouchID认证 🔥
- react-native-fcm - firebase cloud messaging 和 local notification 🔥🔥
- react-native-permissions 统一管理安卓和iOS的权限🔥🔥
- react-native-sqlite-storage iOS/Android上的Sqlite3封装 🔥🔥
- react-native-store 封装了react-native AsyncStorage 🔥🔥
- realm-js 用JS来调用Realm 🔥🔥🔥🔥
- react-native-fetch-blob 更容易的访问文件和交换数据(本地,网络) 🔥🔥🔥
- react-native-camera 相机组件 🔥🔥🔥🔥
- react-native-video 视频组建 🔥🔥🔥🔥
- react-native-image-crop-picker 图片选择器,支持对图片进行切割 🔥
- react-native-video-processing 视频编辑,调整,滤镜
- react-native-css 用CSS的方式对Component进行Style 🔥🔥
- react-native-extended-stylesheet 对stylesheet进行扩展 🔥🔥
react-native-carousel 轮播
react-native-countdown 倒计时
react-native-device-info 设备信息
react-native-fileupload 文件上传
react-native-icons 图标
react-native-image-picker 图片选择器
react-native-keychain iOS KeyChain管理
react-native-picker滚轮选择器
react-native-picker-Android Android 滚轮选择器
react-native-refreshable-listview 可刷新列表
react-native-scrollable-tab-view 可滚动标签
react-native-side-menu 侧栏
react-native-swiper 轮播
react-native-video 视频播放
react-native-viewpager 分页浏览
react-native-scrollable-tab-view 可滑动的底部或上部导航栏框架
react-native-tab-navigator 底部或上部导航框架(不可滑动)
react-native-check-box CheckBox
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/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
A ScrollView-like component that: Has a parallax header Has an optional sticky header Is composable with any component that expects a ScrollView (e.g. ListView or InfiniteScrollView) Can be nested within other views Works on iOS and Android
react-native-parallax-scroll-view
工程目录下终端输入 npm i XXX save
#2017-4-25新增.
1.https://github.com/aroth/react-native-uploader 文件上传 图片.gif
2.https://github.com/oblador/react-native-animatable 动画 图片.gif
3.https://github.com/oblador/react-native-vector-icons 图标 图片.gif
4.https://github.com/ivpusic/react-native-image-crop-picker 图片选择器(可多选) 图片.png
5.https://github.com/beefe/react-native-picker 滚轮选择器 图片.png
6.https://github.com/jsdf/react-native-refreshable-listview 下拉刷新listview 图片.png
7.https://github.com/skv-headless/react-native-scrollable-tab-view 可滚动标签 图片.gif
8.https://github.com/react-native-community/react-native-side-menu 侧栏 图片.gif
9.https://github.com/leecade/react-native-swiper 图片轮播 图片.gif
10.https://github.com/crazycodeboy/react-native-check-box CheckBox 图片.gif
11.https://github.com/crazycodeboy/react-native-easy-toast Toast 组件 图片.gif
12.https://github.com/xinthink/react-native-material-kit 各种漂亮的小组件 图片.gif
- https://github.com/GeekyAnts/NativeBase base组件库 图片.gif
14.https://github.com/mastermoo/react-native-action-button 不错的按钮 图片.gif
15.https://github.com/halilb/react-native-textinput-effects https://github.com/zbtang/React-Native-TextInputLayout 炫酷效果的 TextInput 图片.gif
16.https://github.com/FaridSafi/react-native-gifted-chat 聊天 图片.png
17.https://github.com/lovebing/react-native-baidu-map 百度地图 (集成百度地图详细教程:http://www.jianshu.com/p/eceb7e66fa5e) 图片.png
18.https://github.com/maxs15/react-native-spinkit 加载动画 图片.gif
19.https://github.com/dancormier/react-native-swipeout https://github.com/jemise111/react-native-swipe-list-view 侧滑按钮 图片.gif
20.https://github.com/wuxudong/react-native-charts-wrapper 图表(功能炒鸡强大) 图片.png
21.https://github.com/lelandrichardson/react-native-parallax-view 下拉放大 图片.gif
22.https://github.com/cqm1994617/react-native-myCalendar 可滑动的日历组件 图片.gif
23.https://github.com/KBLNY/react-native-message-bar 提示消息的Bar 图片.gif
24.https://github.com/jeanregisser/react-native-popover 点击弹出视图 图片.gif
25.https://github.com/madriska/react-native-quick-actions 3D Touch 图片.png
26.https://github.com/beefe/react-native-actionsheet 双平台兼容的ActionSheet 27.https://github.com/reactnativecn/react-native-inputscrollview https://github.com/wix/react-native-keyboard-aware-scrollview键盘遮挡问题 28.https://github.com/oblador/react-native-image-progress 图片加载进度条 图片.gif
29.https://github.com/maxs15/react-native-modalbox https://github.com/bodyflex/react-native-simple-modal 模态视图 图片.gif
30.https://github.com/react-native-community/react-native-blur 毛玻璃效果 图片.gif
一个文本语音播放组件: 使用手机系统自带的tts功能合成语音的组件,可将输入的文本转为语音播放。 https://github.com/somonus/react-native-speech文本语音播放组件 可以是一个字符串或者一个对象,当是一个字符串时,则默认以中文播放当前字符串。如果是一个对象,则根据对象的key进行播放。对象包含的key有: text: 需要播放的文本内容 language: 需要以哪种语言播放
#2017.5.2更新
按钮特效 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
#2017.5.4更新 方块滚动轮播图,类似产品块cell展示,或者卡片式滑动 react-native-snap-carousel
有一个旋转模式,刚好有人问我
#2017.5.25更新 这个是一个下拉选项组件 A react-native dropdown/picker/selector component for both Android & iOS. 国人做的,貌似不错,支持个。 react-native-modal-dropdown cnblog的中文解释
一个比较美丽的提示气泡toast react-native-root-toast
#2017.7.12更新
微信及朋友圈分享,微信支付: https://github.com/yorkie/react-native-wechat
QQ分享:https://github.com/reactnativecn/react-native-qq
微博分享: https://github.com/reactnativecn/react-native-weibo
图片上拉放大:https://github.com/lelandrichardson/react-native-parallax-view
原生视频播放器:https://github.com/cornedor/react-native-video-player
倒计时:https://github.com/kkkelicheng/ReactNative-CountDownButton 优点: 不会因为进入后台而停止读秒 支持同个页面再次进入时,智能的判断读秒时间,显示是否继续计时
react-navigation的使用和变更: 使用介绍: http://www.jianshu.com/p/2f575cc35780 demo: https://github.com/pheromone/navigationDemo 在使用react-navigation中遇到几个难点: 1.跳至相应路由(如返回首页功能). http://www.jianshu.com/p/2f575cc35780 2.防止点击过快,跳界面两次. https://github.com/react-community/react-navigation/pull/1348/files 3.static中使用this. http://www.jianshu.com/p/2f575cc35780
Tip:本期更新的组件主要来源于:少停的博客分享
#2017.08.01更新
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
#11.16更新 增加几个pdf的组件,具体用法请根据自身项目考虑 react-native-pdf react-native-doc-viewer react-native-html-to-pdf