react-native-thirdparty

collect some react-native-thirdparty 收集了一些RN的第三方组件集合 http://www.jianshu.com/p/53ff78168acc

#收录一些好用的第三方组件，以方便日常的使用，大家有什么推荐的也可以跟我说，我加进去。如有冒犯，可以联系我删除，O(∩_∩)O谢谢。我发现有什么新的也会更新进去。 github的地址在这,同步更新.欢迎点亮星星哈.

React Native 项目常用第三方组件汇总：

自己封的组件,用在tabbar上面的动画哈,用在其他地方也是可以的,欢迎star 🔥🔥🔥🔥 react-native-tabbar-animated 🔥🔥🔥🔥

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

UI

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

图片.gif

3.https://github.com/oblador/react-native-vector-icons 图标图片.gif

4.https://github.com/ivpusic/react-native-image-crop-picker 图片选择器（可多选）图片.png

图片.png

5.https://github.com/beefe/react-native-picker 滚轮选择器图片.png

图片.png

6.https://github.com/jsdf/react-native-refreshable-listview 下拉刷新listview 图片.png

7.https://github.com/skv-headless/react-native-scrollable-tab-view 可滚动标签图片.gif

图片.gif

8.https://github.com/react-native-community/react-native-side-menu 侧栏图片.gif

9.https://github.com/leecade/react-native-swiper 图片轮播图片.gif

图片.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

图片.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

图片.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

图片.gif

20.https://github.com/wuxudong/react-native-charts-wrapper 图表(功能炒鸡强大) 图片.png

图片.png

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

22.https://github.com/cqm1994617/react-native-myCalendar 可滑动的日历组件图片.gif

图片.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

图片.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

有一个旋转模式，刚好有人问我

https://camo.githubusercontent.com/2b7c5fc1e24b4a914d9a60cbc253c0d3b7b6a1b7/687474703a2f2f692e696d6775722e636f6d2f464c516347474c2e676966

#2017.5.25更新这个是一个下拉选项组件 A react-native dropdown/picker/selector component for both Android & iOS. 国人做的，貌似不错，支持个。 react-native-modal-dropdown cnblog的中文解释

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