React Native開發(fā)中常用三方組件大全
作者整理的一套常用的React Native開發(fā)中使用到的三方組件庫大全，后續(xù)也會持續(xù)更新，同學(xué)們?nèi)绻l(fā)現(xiàn)有好用的組件但是文章中沒有列出的，也請給作者留言告知組件名稱，作者好將讀者們反饋的組件添加到文章中，以便幫助更多的RN開發(fā)者。后續(xù)持續(xù)更新的三方組件會放到文章的開頭部分，代表是新追加的組件，小伙伴們請知曉！
如果小伙伴們想學(xué)習(xí)React Native 框架的搭建以及Redux框架的學(xué)習(xí)使用，可以參考作者的開源項目OneM: https://github.com/guangqiang-liu/OneM 記得給個 star 哦
當(dāng)然也歡迎小伙伴們加入作者的React Native實戰(zhàn)開發(fā)QQ交流群:620792950, 開發(fā)中遇到的問題可以在群里隨意的提問，互相交流學(xué)習(xí)。
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
導(dǎo)航組件 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
設(shè)備信息
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
側(cè)欄
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
可滑動的底部或上部導(dǎo)航欄框架
react-native-scrollable-tab-view
https://github.com/skv-headless/react-native-scrollable-tab-view
底部或上部導(dǎo)航框架(不可滑動)
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
簡易路由跳轉(zhuǎn)框架
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 目錄作為本地視圖的控件，其風(fēng)格可以定制
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
側(cè)滑按鈕
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
語言轉(zhuǎn)化和一些常用格式轉(zhuǎn)換
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
影音相關(guān)
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的優(yōu)化
https://github.com/sghiassy/react-native-sglistview
圖片和base64互轉(zhuǎn)
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相關(guān)
https://github.com/alinz/react-native-webview-bridge
判斷橫豎屏
https://github.com/yamill/react-native-orientation
https://github.com/cnjon/react-native-pdf-view
獲取設(shè)備信息
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
模態(tài)視圖
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
動畫
https://github.com/oblador/react-native-animatable
圖標
https://github.com/oblador/react-native-vector-icons
圖片選擇器（可多選）
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
側(cè)欄
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.lxweimin.com/p/eceb7e66fa5e
加載動畫
https://github.com/maxs15/react-native-spinkit
側(cè)滑按鈕
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
模態(tài)視圖
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 引導(dǎo)頁
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
tip提示框
https://github.com/chirag04/react-native-tooltip
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
IM聊天界面
https://github.com/Ice-MT/react-native-imUI
更多文章
- 作者React Native開源項目OneM【500+ star】地址(按照企業(yè)開發(fā)標準搭建框架完成開發(fā)的)：https://github.com/guangqiang-liu/OneM：歡迎小伙伴們 star
- 作者簡書主頁：包含60多篇RN開發(fā)相關(guān)的技術(shù)文章http://www.lxweimin.com/u/023338566ca5 歡迎小伙伴們：多多關(guān)注，多多點贊
