RN第三方组件

用过的一些组件。

react-native

导航

react-native-simple-router

react-native-scrollable-tab-view

react-native-router-flux

react-native-router-redux

react-native-tabbar-navigator(IOS only)

react-native-navigation

加密

react-native-crypto此类库支持在 React Native 中使用 node 的 crypto 模块

https://www.npmjs.com/package/crypto-js

整体框架布局–轮播

react-native-side-menu 侧栏

react-native-scrollable-tab-view 可滑动的底部或上部导航栏框架

轮播视图

react-native-viewpager 分页浏览

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

react-native-swiper 轮播

react-native-drawer 抽屉效果

react-native-side-menu

react-navigation-material-bottom-tabs底部tab

react-native-carousel

react-native-looped-carousel

react-native-carousel-control

react-native-spring-carousel

react-native-image-carousell

键盘遮挡

react-native-keyboard-aware-scrollview
https://github.com/reactnativecn/react-native-inputscrollview

图片

图标

react-native-icons 图标

react-native-vector-icons头像库 矢量

初始化应用时启动轮播图

react-native-looped-carousel

react-native-auto-height-image自动调节图片高度

react-native-image-picker 图片选择器

图片缓存

react-native-fast-image图片缓存以及预加载

react-native-fast-image这是一个native库，在iOS上是包装的 SDWebImage，Android上是包装的Glide (Android)，这两个都是原生上万星星的库。因为是native库，所以安装后也需要链接，具体方法跟上面一样。这是一个使用例子：

react-native-cache-image，react-native-rn-cacheimage纯JS实现，所以兼容性很好。首先安装rn-fecth-blob。
Image 组件在 iOS 端实现了缓存，而android 端仍未实现，而且，就算实现了 iOS端 ，可能有些需求仍然比较难实现，比如一般APP都有一个 清除缓存 的功能，如果我们使用默认的 Image 的缓存实现，我们能难定位图片到底缓存在本地文件系统的哪个目录。 react-native-rn-cacheimage 的实现方式是，把所有的缓存图片都放在一个指定的文件夹下，并提供了一个方法 CacheHelper.clearCache() 方法能够轻松清除缓存。

相关文章：https://www.jianshu.com/p/19ef9f32c332
react-native-image-zoom-viewer图片轮播、放大、手势捏合

react-native-image-resizer图片压缩

react-native-image-viewer实现大图预览

图片放大查看

react-native-lightbox

react-native-transformable-image

照片选择

react-native-image-picker

react-native-camera-roll-picker

react-native-image-crop-picker图像选择器，可支持摄像头，可配置压缩，可多选图像和可对图像进行裁剪的。

图片加载进度条 https://github.com/oblador/react-native-image-progress

图片保存到本地

通知栏

Noticebar与Snackbar的区别：http://www.xueui.cn/design-theory/style-guide/noticebar-snack-bar.html

noticebar

react-native-noticebar上下滚动的通知栏

Ant Design Mobile NoticeBar 通告栏滚动播放的noticebar

纯JS跑马灯的text

链接原生Text跑马灯效果

Snackbar

rn-snackbar

文件

react-native-fs文件下载、文本存储

先下载https://github.com/wkh237/react-native-fetch-blob
或者rn-fetch-blob

react-native-fileupload 文件上传

视频

react-native-video 视频播放

滚动列表

react-native-refreshable-listview 可刷新列表

react-native-sortable-listview 分类ListView

单选多选ListView https://github.com/hinet/react-native-checkboxlist

react-native-invertible-scroll-view 翻转listview

recyclerlistview”: “^2.0.0-beta.4”,

recyclerlistview-gridlayoutprovider”: “^1.0.1”,

react-native-parallax-scroll-view拉伸最上方图片刷新，类似微信朋友圈刷新

react-native-lazyload

react-native-sglistviewListView的优化

react-native-refreshable-listview

WebView网页

react-native-htmlview 将 HTML 目录作为本地视图的控件，其风格可以定制

react-native-webview-invoke React Native和WebView中的函数可以互相调用

react-native-easy-toast 一款简单易用的 Toast 组件，支持 Android&iOS.

WebView相关 https://github.com/alinz/react-native-webview-bridge

选项卡 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/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
选择按钮 https://github.com/sconxu/react-native-checkbox

制作本地库 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

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

本地存储 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/rt2zz/react-native-contacts

缓存管理 https://github.com/reactnativecn/react-native-http-cache

图片和base64互转 https://github.com/xfumihiro/react-native-image-to-base64

安卓 iOS 白屏解决 https://github.com/mehcode/rn-splash-screen

清除按钮的输入框 https://github.com/beefe/react-native-textinput

PDF https://github.com/cnjon/react-native-pdf-view

获取设备信息

react-native-device-info

下拉-上拉-刷新 https://github.com/FaridSafi/react-native-gifted-listview

https://github.com/greatbsky/react-native-pull/wiki

下拉选择 https://github.com/alinz/react-native-dropdown

通讯录

react-native-alphabetlistview类似iPhone通讯录样式

toast提示

react-native-root-toast浮动提示

毛玻璃效果

react-native-blur

滑动选项卡 https://github.com/skv-headless/react-native-scrollable-tab-view

进度条

react-native-progress

第三方授权登录

https://github.com/yoaicom/react-native-social-kit https://github.com/mozillo/react-native-open-share https://github.com/zuoyoulian/React-Native-iOS-OpenShare

react-native-dialog-input弹框的输入框

react-native-countdown 倒计时

react-native-device-info 设备信息

react-native-actionsheet双平台兼容的ActionSheet弹框

相机

react-native-camera

react-native-camera-kit相机组件

react-native-keychain iOS KeyChain管理

react-native-picker滚轮选择器

react-native-picker-Android Android 滚轮选择器

表情选择

react-native-emoji-selector

react-native-emoji-picker

捕获异常

react-native-exception-handler

屏幕适配

react-native-extra-dimensions-android

React Native目前存在一个错误，Dimensions.get(‘window’).height有时会返回错误的值。

手势

react-native-gesture-handler
react-native-gesture-password手势解锁

手势放大缩小移动 https://github.com/kiddkai/react-native-gestures

https://github.com/johanneslumpe/react-native-gesture-recognizers

react-native-linear-gradient渐变

Model模态视图

react-native-modal
react-native-modalbox
react-native-simple-modal

横竖屏

react-native-orientation判断横竖屏

二维码

react-native-qrcode-svg

react-native-qrcode-reader扫描二维码

react-native-barcodescanner

网页链接

react-native-hyperlink超链接变可点击的

react-native-tab-navigator 底部或上部导航框架(不可滑动)

react-native-check-box CheckBox

react-native-splash-screen 启动白屏问题

react-native-simple-router 简易路由跳转框架

react-native-storage 持久化存储
“react-native-global-props”: “^1.1.5”,
“react-native-iphone-x-helper”: “^1.2.0”,
“react-native-paper”: “^2.15.2”,
“react-native-plugin-zhugeio”: “^1.1.1”,
“react-native-randombytes”: “^3.5.3”,
“react-native-shadow”: “^1.2.2”,
“react-native-svg”: “^9.4.0”,
“react-native-tab-view”: “^1.3.2”,
“react-native-text-size”: “^3.0.0”,
“react-native-update-app”: “^1.1.11”,
“react-native-view-shot”: “^2.5.0”,

微信

react-native-wechat “git+https://github.com/AegoYu/react-native-wechat.git"

react-navigation

react-navigation-redux-helpers
react-navigation-transitions
react-redux
redux-immutable
redux-persist

socket.io-client
teaset
react-native-menu
react-timer-mixin
redux
redux-actions
redux-form
redux-thunk
remote-redux-devtools
rmc-date-picker
rmc-tabs
semver
react-native-networkplugin

动画

react-native-collapsible制作动画可折叠组件—手风琴

React-native-animatable 动画

动画 https://github.com/oblador/react-native-animatable

加载动画 https://github.com/maxs15/react-native-spinkit

更多

react native第三方组件（持续更新…）

https://github.com/Geek-ch/react-native-thirdparty