React Native 常用第三方庫

整理的一份 React Native 開發中常用的三方組件庫大全。

完整的 App

使用React Native開發且功能完整的App。

序號	名稱	簡介
1	surmon.me.native	一個非常適合入門學習的react-native項目，有借鑒自其他種子項目的組織方式，代碼清晰、結構合理。
2	Mister-Poster	用到了 RN+Redux+Redux Storage+Firebase 的一個開源項目
3	whatsapp	仿 whatsapp
4	elm-react-native	RN寫的餓了么，還原度相當高，實現了各類動效，高度推薦
5	HelloRN	適合入門學習的demo，適配android ios， 有網頁、圖片、音樂、地圖等功能
6	ZhiHuDaily-React-Native	仿知乎日報
7	im.js	一個基於 react-native + mobx + socket.io + node 的仿微信 JS-Wechat
8	shopping-react-native	一個商城類的RN項目
9	JueJinClient	仿掘金客戶端
10	react-weather	精致的天氣類App
11	30-days-of-react-native	30天學React Native的Demo App，結合作者源碼，學React Native效果杠桿滴！
12	FinanceReactNative	使用React Native做的金融證券股票類App
13	GitHubPopular	這是一個用來查看GitHub最受歡迎與最熱項目的App,它基於React Native支持Android和iOS雙平台。
14	react-native-eyepetizer	模仿開眼3.1.2
15	react-native-gank	為 Gank.io 做的一個 React-Native 移動客戶端
16

組件篇

集合常用組件的綜合組件庫。

序號	名稱	簡介
1	native-base	好用的一套綜合組件庫，庫中集合了很多第三方的庫，許多自定義的組件，使用方便
2	react-native-elements	由react-native-community社區維護的一套綜合組件庫
3	Shoutem-UI	庫中包含了頂部標題欄，下拉菜單，視頻播放，帶加載刷新的ListView，GridView等，界面美觀大方
4	1.nachos-ui	庫中包含了一些常用的組件，不想一個個找的可以直接使用這種框架
5	tipsi-ui-kit	組件比較少，大部分都是一些裝飾性的組件
6	ignite	通過命令行創建帶有模板代碼的項目，可以學習一下代碼的寫法。配置略復雜，要求node和yarn必須是最新的
7	react-native-starter-app	集合了一些常用組件的框架，省去不少搭建項目基礎代碼的時間
8	styled-components	可以讓自定義組件變得更簡單的一個庫
9

滾動視圖

列表、刷新、加載等

序號	名稱	簡介
1	react-native-gifted-listview	支持刷新，加載更多
2	react-native-parallax-view	可以自定義頭部，帶彈性當打效果的豎向ScrollView
3	react-native-pull-to-refresh	一個下拉刷新的組件，支持任意View刷新
4	react-native-parallax-scroll-view	支持頭部彈性放大的ScrollView，功自定義功能豐富，上滑時帶有視差效果
5	react-native-swiper	可以實現頁面左右滑動的組件，用來制作引導頁，Banner，看大圖頁面等
6	react-native-banner	一個專門針對Banner的組件，是基於react-native-swiper修改的
7	react-native-alphabetlistview	帶側邊欄的列表
8	react-native-app-intro	Android風格的App引導頁組件
9

多媒體

視頻播放，拍照，錄音等

序號	名稱	簡介
1	react-native-video	兼容Andorid和iOS的視頻播放組件，安卓在安裝以后需要還需要手動修改node_module中的文件才能正確使用
2	react-native-camera	通過React Native直接調用設備相機進行錄制和拍攝的組件
3	react-native-audio	通過React Native進行音頻錄制
4	react-native-video-processing	視頻編輯庫
5	react-native-camera-roll-picker	選取系統相冊中的照片
6	react-native-smart-barcode	二維碼掃描組件
7	react-vr	React&React Native上的 VR 組件，fb官方出品，推薦！
8

導航欄

底部tab，頂部導航，頁面管理等

序號	名稱	簡介
1	react-native-tab-navigator	適合做App底部Tab的組件，簡單易用，用的比較多
2	react-native-scrollable-tab-view	一款適合用作頂部tab的組件，類似各大新聞App中的那樣
3	React Native Tab View	一個頂部tab組件
4	react-native-navigation	一個用於頁面間導航的解決方案
5	react-native-nav	一個通用的頂部標題欄，可以支持文字或圖標
6	react-navigation	Learn once, navigate anywhere，強大的導航組件
7	react-native-navigation-drawer	側滑菜單
8	react-native-custom-segmented-control	頂部tab，帶指示器和奇切換動畫
9	react-native-segmented-view	頂部tab組件
10	react-native-router-flux	React Native Router (v4.x)

存儲

文件、數據庫、鍵值對存儲等

序號	名稱	簡介
1	react-native-storage	本地鍵值對存儲，支持持久化存儲
2	realm-js	搞移動開發的還有誰還不知道Realm的？移動平台數據庫存儲沒有之一！特點就一個：快！快！快！現在也推出了JS版的v1.0.0
3	react-native-sqlite-storage	React Native上的sqlite存儲工具
4	react-native-fetch-blob	一個致力於讓RN讀取手機文件更方便更高效的庫
5

輔助資源

圖標、工具類等

序號	名稱	簡介
1	react-native-vector-icons	包含大量圖標，如果在引用時直接用"arrow-back"則會自己區分平台，如果使用“ios(md)-arrow-back”，指定平台
2	react-native-cross-platform-icons	一個可以跨平台使用的圖標庫
3	React-Native-Virtual-Keyboard	虛擬鍵盤
4	ReactNativeLocalization	一個實現多語言環境的框架
5

動畫

各種動畫效果

序號	名稱	簡介
1	react-native-spinkit	一些加載動畫的集合
2	react-native-progress	帶動畫的進度條
3	lottie-react-native	Airbnb良心開源動畫庫
4

Dialog

弱提示，確認框，下拉菜單等

序號	名稱	簡介
1	react-native-easy-toast	實現類似Android中Toast的效果，用於界面弱提示
2	react-native-popup-dialog	自帶動畫的彈出框
3	react-native-popup-menu	彈出菜單
4	react-native-wheel-picker	滾輪選擇組件
5	react-native-message-bar	可以實現應用內消息通知的彈出框
6	react-native-tooltip	帶箭頭的彈出菜單
7	react-native-searchbar	彈出式搜索框
8	react-native-root-modal	彈出頁面
9	react-native-picker	底部彈出Picker，多級聯動，三級聯動選擇器
10	react-native-picker-xg	滾輪選擇器
11	React-Native-SnackBar-Component	類似Android平台上的snackbar
12	ReactNativeTips	移動端各類Tips提示組件合集，提供toast，success，error，alert，confirm等

圖片

圖形圖像處理（濾鏡，模糊，修改）

序號	名稱	簡介
1	gl-react-native	通過WebGL給圖片添加各種炫酷效果的組件，而且是各種炫酷
2	react-native-blur	圖片模糊的組件
3	react-native-photo-browser	選擇系統相冊圖片，瀏覽選中大圖
4	react-native-fit-image	根據圖片的大小自動進行縮放的Image組件
5	react-native-webp	使項目支持WebP圖片格式
6	react-native-palette	從圖片中直接提取顏色的庫
7	react-native-image-crop-picker	圖片剪裁，自帶支持系統圖庫選擇圖片功能
8

文本

文本、輸入框、搜索框

序號	名稱	簡介
1	react-native-progressive-input	帶輸入提示列表的輸入框
2	react-native-textinput-effects	類似Android中TextInputLayout，不過可以設置的樣式更多
3	react-native-slot-machine	帶隨機滾動效果的Text組件
4	react-native-marquee-label	帶跑馬燈效果的Text組件
5	react-native-hyperlink	支持超鏈接的Text
6	react-native-hypertext	支持超鏈接的Text
7	react-native-mentions	一個可以通過 @ 符號提及某人的輸入框
8	react-native-floating-labels	類似Android上的一個輸入框組件
9

菜單

側滑，展開，懸浮等各類菜單組件

序號	名稱	簡介
1	react-native-accordion	可以收起，展開的菜單組件
2	react-native-action-button	懸浮按鈕，類似Android中的FloatingActionButton
3	react-native-actionsheet-native	類似IOS平台上的底部彈出菜單
4	react-native-off-canvas-menu	側滑菜單
5	react-native-swipeout	列表Item側滑菜單
6	react-native-swipeable	為列表Item添加側滑功能的組件
7	react-native-circle-button	帶動畫的圓形菜單
8	react-native-drawer	側滑菜單，用RN代碼實現的，所以感覺比較卡
9

圖表

各種圖表

序號	名稱	簡介
1	react-native-charts-wrapper	圖表組件，用RN代碼對原生組件進行了包裝。Android上用的MPAndroidChart，iOS上用的是Charts
2	react-native-pie	餅狀圖表，支持雙平台
3	rn-d3-art-charts	帶動畫效果的圖表組件，雙平台通用，但是在Android 上沒有動畫效果
4

國內服務

RN封裝的QQ登錄，極光推送，支付寶等

序號	名稱	簡介
1	react-native-qq	RN中文網的天地之靈封裝的QQ登錄插件
2	jpush-react-native	RN封裝的極光推送，支持雙平台
3	react-native-smart-amap-location	高德定位
4	react-native-smart-alipay	支付寶支付
5	react-native-open-share	新浪微博，微信，QQ，支付寶等分享，支付，登錄
6	react-native-share	用於分享的組件
7	react-native-share-extension	自定義分享平台的組件
8

其它

序號	名稱	簡介
1	react-native-splash-screen	啟動頁組件
2	react-native-display	給組件添加進入退出動畫，通過控制顯示與否，提高組件性能
3	react-native-button-component	比系統Button好用一點的Button組件
4	react-native-step-indicator	操作步驟指示器
5	react-native-tinder-swipe-cards	類似探探App中左右滑動的組件
6	react-native-star-rating	星級評分組件
7	react-native-qrcode	展示和生成二維碼組件
8	react-native-modest-checkbox	好用的復選框組件
9	react-native-foldview	可以折疊起來的UI組件
10	react-native-keyboard-spacer	讓軟鍵盤的彈出和隱藏更優雅一點
11	react-native-CountDowntimer	一個可以定義樣式的倒計時組件
12	react-native-qrcode	一個生成二維碼的組件
13	react-native-smart-gesture-password	手勢九宮格圖案解鎖組件
14	react-native-qrcode-app	一個利用RN代碼實現二維碼識別的Demo
15	react-native-device-info	獲取手機設備信息的組件

參考：
React Native常用三方組件庫大全