React Native 第三方組件UI類

* [React-Native-Elements](https://link.jianshu.com?t=https://github.com/react-native-community/React-Native-Elements) 一組開發RN的UI工具包（強烈推薦） 🔥🔥🔥🔥🔥 * [react-native-calendars](https://link.jianshu.com?t=https://github.com/wix/react-native-calendars) 🔥🔥🔥🔥 優秀的日曆控件 * [apsl-react-native-button](https://link.jianshu.com?t=https://github.com/APSL/react-native-button) 定義了一個Button支持用Style來配置 🔥🔥 * [react-native-action-button](https://link.jianshu.com?t=https://github.com/APSL/react-native-button) 支持多種點擊事件的Button控件 🔥🔥 * [react-native-button](https://link.jianshu.com?t=https://github.com/ide/react-native-button) 另一個Button組件 🔥🔥 * [ex-navigator](https://link.jianshu.com?t=https://github.com/exponentjs/ex-navigator) 封裝Navigator,以Route爲中心的Navigator 🔥🔥 * [gl-react-native](https://link.jianshu.com?t=https://github.com/ProjectSeptemberInc/gl-react-native) React Native中使用OPENGL來實現複雜的圖片和components渲染 🔥🔥🔥 * [react-native-activity-view](https://link.jianshu.com?t=https://github.com/naoufal/react-native-activity-view) iOS上的分享和action sheets組件 🔥🔥 * [react-native-app-intro](https://link.jianshu.com?t=https://github.com/FuYaoDe/react-native-app-intro) 引導頁 🔥🔥 * [react-native-blur](https://link.jianshu.com?t=https://github.com/react-native-fellowship/react-native-blur) 添加模糊或者毛玻璃效果 🔥🔥🔥 * [react-native-calendar](https://link.jianshu.com?t=https://github.com/christopherdro/react-native-calendar) 日曆 🔥 * [react-native-chart](https://link.jianshu.com?t=https://github.com/tomauty/react-native-chart) 繪圖（折線圖，柱狀圖，扇形圖） 🔥🔥🔥 * [react-native-circular-progress](https://link.jianshu.com?t=https://github.com/bgryszko/react-native-circular-progress) 圓形的顯示進度的視圖 🔥 * [react-native-collapsible](https://link.jianshu.com?t=https://github.com/oblador/react-native-collapsible) 可摺疊的component 🔥 * [React Native Drawer](https://link.jianshu.com?t=https://github.com/root-two/react-native-drawer) 抽屜效果，可 用來實現側拉菜單 🔥🔥🔥 * [react-native-dropdown](https://link.jianshu.com?t=https://github.com/alinz/react-native-dropdown)下拉菜單 🔥 * [ReactNativeEffectsView](https://link.jianshu.com?t=https://github.com/voronianski/react-native-effects-view) 封裝了iOS 8上的UIVisualEffectViews，在React Native中實現毛玻璃效果 🔥 * [react-native-gesture-password](https://link.jianshu.com?t=https://github.com/spikef/react-native-gesture-password) 手勢解鎖，支持iOS和Android 🔥 * [react-native-gifted-form](https://link.jianshu.com?t=https://github.com/FaridSafi/react-native-gifted-form) 在React Native中方便的使用表格 🔥🔥 * [react-native-gifted-listview](https://link.jianshu.com?t=https://github.com/FaridSafi/react-native-gifted-listview) 下拉刷新和上拉加載的ListView 🔥🔥 * [react-native-gifted-messenger](https://link.jianshu.com?t=https://github.com/FaridSafi/react-native-gifted-messenger) 方便的實現聊天UI 🔥🔥🔥🔥 * [react-native-grid-view](https://link.jianshu.com?t=https://github.com/lucholaf/react-native-grid-view) 網格視圖，類似iOS中的UICollectionView 🔥 * [react-native-image-picker](https://link.jianshu.com?t=https://github.com/marcshilling/react-native-image-picker) 用Native UI來選擇圖片或者拍照 🔥🔥🔥 * [react-native-keyboard-spacer](https://link.jianshu.com?t=https://github.com/Andr3wHur5t/react-native-keyboard-spacer) 適用於iOS的根據鍵盤自動調整輸入框 🔥🔥 * [react-native-keyboardevents](https://link.jianshu.com?t=https://github.com/johanneslumpe/react-native-keyboardevents) 監聽鍵盤顯示/隱藏 🔥 * [react-native-lightbox](https://link.jianshu.com?t=https://github.com/oblador/react-native-lightbox) 圖片全屏預覽 🔥🔥🔥 * [react-native-looped-carousel](https://link.jianshu.com?t=https://github.com/appintheair/react-native-looped-carousel) 視圖輪播 🔥🔥 * [react-native-mapbox-gl](https://link.jianshu.com?t=https://github.com/mapbox/react-native-mapbox-gl) 地圖 🔥🔥 * [react-native-maps](https://link.jianshu.com?t=https://github.com/lelandrichardson/react-native-maps) 地圖 🔥🔥🔥🔥 * [react-native-material-design](https://link.jianshu.com?t=https://github.com/react-native-material-design/react-native-material-design) material design 🔥🔥🔥 * [react-native-material-kit](https://link.jianshu.com?t=https://github.com/xinthink/react-native-material-kit) 一組UI Components，爲了介紹 [Material Design](https://link.jianshu.com?t=http://www.google.com/design/spec/material-design/introduction.html) 🔥🔥🔥🔥 * [react-native-modalbox](https://link.jianshu.com?t=https://github.com/maxs15/react-native-modalbox) 用於模態顯示的Component 🔥🔥 * [react-native-orientation](https://link.jianshu.com?t=https://github.com/yamill/react-native-orientation) 監聽設備旋轉 🔥 * [react-native-parallax](https://link.jianshu.com?t=https://github.com/oblador/react-native-parallax) parallax效果 🔥 * [react-native-parallax-scroll-view](https://link.jianshu.com?t=https://github.com/jaysoo/react-native-parallax-scroll-view) 視差滾動效果的ScrollView，支持固定header * [react-native-picker](https://link.jianshu.com?t=https://github.com/beefe/react-native-picker) 選擇器，可用於實現時間選擇，區域選擇 🔥 * [react-native-popover](https://link.jianshu.com?t=https://github.com/jeanregisser/react-native-popover) 彈出氣泡框的Component 🔥 * [react-native-progress-hud](https://link.jianshu.com?t=https://github.com/naoufal/react-native-progress-hud) ProgressHUD 🔥 * [react-native-refresher](https://link.jianshu.com?t=https://github.com/syrusakbary/react-native-refresher) 支持下拉刷新的listview 🔥🔥 * [react-native-router](https://link.jianshu.com?t=https://github.com/t4t5/react-native-router)類似Navigator的導航控制器 🔥🔥🔥🔥 * [react-native-scrollable-tab-view](https://link.jianshu.com?t=https://github.com/skv-headless/react-native-scrollable-tab-view) 支持左右滾動的來切換tab的tableview 🔥🔥🔥🔥 * [react-native-controllers](https://link.jianshu.com?t=https://github.com/wix/react-native-controllers) 封裝了 原生的iOS 導航欄，tabbar，抽屜效果等。 🔥🔥 * [react-native-search-bar](https://link.jianshu.com?t=https://github.com/umhan35/react-native-search-bar) 封裝iOS原生UISearchBar 🔥🔥 * [react-native-spinkit](https://link.jianshu.com?t=https://github.com/maxs15/react-native-spinkit) 一組Activity指示器 🔥🔥 * [react-native-splashscreen](https://link.jianshu.com?t=https://github.com/remobile/react-native-splashscreen) App載入視圖，啓動後自動隱藏 🔥 * [react-native-svgkit](https://link.jianshu.com?t=https://github.com/brentvatne/react-native-svgkit) 顯示SVG格式圖片 🔥🔥 * [react-native-swipeout](https://link.jianshu.com?t=https://github.com/dancormier/react-native-swipeout) 類似TableViewCell的左滑刪除，支持Component滑動 🔥🔥🔥 * [react-native-swiper](https://link.jianshu.com?t=https://github.com/leecade/react-native-swiper) <font color="orange">視圖輪播，上下/左右滑動組件,類似UICollectionView</font> 🔥🔥🔥🔥 * [react-native-tableview](https://link.jianshu.com?t=https://github.com/jondot/awesome-react-native) 封裝iOS原生UITableview * [react-native-vector-icons](https://link.jianshu.com?t=https://github.com/oblador/react-native-vector-icons) <font color="orange">3000+支持自定義的圖標</font> 🔥🔥🔥🔥 * [react-native-sglistview](https://link.jianshu.com?t=https://github.com/sghiassy/react-native-sglistview) 爲了解決React Native中ListView的內存問題 🔥 * [react-native-invertible-scroll-view](https://link.jianshu.com?t=https://github.com/exponentjs/react-native-invertible-scroll-view) 逆向的ScrollView，從底部開始佈局，適用於聊天等向上滑動來加載更多的情況 🔥 * [react-native-viewpager](https://link.jianshu.com?t=https://github.com/race604/react-native-viewpager) 視圖輪播，支持循環滾動，自定義視圖。已做性能優化 🔥🔥🔥 * [react-native-tab-navigator](https://link.jianshu.com?t=https://github.com/exponentjs/react-native-tab-navigator) TabBar切換視圖 🔥🔥 * [react-native-loading-spinner-overlay](https://link.jianshu.com?t=https://github.com/niftylettuce/react-native-loading-spinner-overlay) 加載中的提示spinner 🔥,支持iOS/Android * [react-native-color-picker](https://link.jianshu.com?t=https://github.com/instea/react-native-color-picker) iOS/Android通用的顏色選擇器 * [react-native-pathjs-charts](https://link.jianshu.com?t=https://github.com/capitalone/react-native-pathjs-charts) - 基於react-native-svg 和 paths-js寫的iOS，Android通用的繪圖庫 🔥 * [react-native-gl-model-view](https://link.jianshu.com?t=https://github.com/rastapasta/react-native-gl-model-view) - 顯示/動畫 Wavefront，.OBJ等3D對象(iOS) * [react-native-message-bar](([https://github.com/KBLNY/react-native-message-bar](https://link.jianshu.com?t=https://github.com/KBLNY/react-native-message-bar)) 在屏幕底部/頂部展示通知 * [react-native-fast-image](https://link.jianshu.com?t=https://github.com/DylanVann/react-native-fast-image) 高性能的圖片組件 * [react-native-search-box](https://link.jianshu.com?t=https://github.com/crabstudio/react-native-search-box) 純JS寫的類似iOS SearchBar的組件 * [react-native-splash-screen](https://link.jianshu.com?t=https://github.com/crazycodeboy/react-native-splash-screen) A splash screen for react-native, hide when application loaded ,it works on iOS and Android. 🔥🔥🔥🔥 * [rn-placeholder](https://link.jianshu.com?t=https://github.com/mfrachet/rn-placeholder) 🔥 空數據的站位符，很適合用來做列表站位 * [react-native-css](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fsabeurthabti%2Freact-native-css) 用CSS的方式對Component進行Style 🔥🔥 * [react-native-extended-stylesheet](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fvitalets%2Freact-native-extended-stylesheet) 對stylesheet進行擴展 🔥🔥 * react-native-icons 圖標 * react-native-scrollable-tab-view 可滾動標籤 * react-native-side-menu 側欄 * react-native-check-box CheckBox * react-native-easy-toast 一款簡單易用的 Toast 組件，支持 Android&iOS. * material組件庫（各種漂亮的小組件）[https://github.com/xinthink/react-native-material-kit](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fxinthink%2Freact-native-material-kit) * base組件庫（各種封裝不錯的小組件）[http://nativebase.io/docs/v0.4.6/components#anatomy](https://link.jianshu.com?t=http%3A%2F%2Fnativebase.io%2Fdocs%2Fv0.4.6%2Fcomponents%23anatomy) [https://github.com/GeekyAnts/NativeBase](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2FGeekyAnts%2FNativeBase) * 不錯的按鈕 [https://github.com/mastermoo/react-native-action-button](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fmastermoo%2Freact-native-action-button) [https://github.com/ide/react-native-button](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fide%2Freact-native-button) * 炫酷效果的 TextInput [https://github.com/halilb/react-native-textinput-effects](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fhalilb%2Freact-native-textinput-effects) [https://github.com/zbtang/React-Native-TextInputLayout](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fzbtang%2FReact-Native-TextInputLayout) * 抽屜效果 [https://github.com/root-two/react-native-drawer](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Froot-two%2Freact-native-drawer) [https://github.com/react-native-fellowship/react-native-side-menu](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Freact-native-fellowship%2Freact-native-side-menu) * 側滑按鈕 [https://github.com/dancormier/react-native-swipeout](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fdancormier%2Freact-native-swipeout) [https://github.com/jemise111/react-native-swipe-list-view](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fjemise111%2Freact-native-swipe-list-view) * 圖表 [https://github.com/tomauty/react-native-chart](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Ftomauty%2Freact-native-chart) * 下拉放大 [https://github.com/lelandrichardson/react-native-parallax-view](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Flelandrichardson%2Freact-native-parallax-view) * 可滑動的日曆組件 [https://github.com/cqm1994617/react-native-myCalendar](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fcqm1994617%2Freact-native-myCalendar) * 選擇按鈕 [https://github.com/sconxu/react-native-checkbox](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fsconxu%2Freact-native-checkbox) * 提示消息的Bar [https://github.com/KBLNY/react-native-message-bar](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2FKBLNY%2Freact-native-message-bar) * 照片牆 [https://github.com/ldn0x7dc/react-native-gallery](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fldn0x7dc%2Freact-native-gallery) * 星星 [https://github.com/djchie/react-native-star-rating](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fdjchie%2Freact-native-star-rating) * Text跑馬燈效果 [https://github.com/remobile/react-native-marquee-label](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fremobile%2Freact-native-marquee-label) * 圖片加載進度條 [https://github.com/oblador/react-native-image-progress](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Foblador%2Freact-native-image-progress) * 輪播視圖 [https://github.com/race604/react-native-viewpager](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Frace604%2Freact-native-viewpager) [https://github.com/FuYaoDe/react-native-app-intro](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2FFuYaoDe%2Freact-native-app-intro) [https://github.com/appintheair/react-native-looped-carousel](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fappintheair%2Freact-native-looped-carousel) [https://github.com/leecade/react-native-swiper](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fleecade%2Freact-native-swiper) * 毛玻璃效果 [https://github.com/react-native-fellowship/react-native-blur](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Freact-native-fellowship%2Freact-native-blur) * 滑動可以收回頭部動畫的列表 react-native-parallax-scroll-view * 下拉選擇 [https://github.com/alinz/react-native-dropdown](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Falinz%2Freact-native-dropdown) * 圖片查看 [https://github.com/oblador/react-native-lightbox](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Foblador%2Freact-native-lightbox) * 照片選擇 [https://github.com/marcshilling/react-native-image-picker](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fmarcshilling%2Freact-native-image-picker) [https://github.com/ivpusic/react-native-image-crop-picker](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fivpusic%2Freact-native-image-crop-picker) * 模態視圖 [https://github.com/maxs15/react-native-modalbox](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fmaxs15%2Freact-native-modalbox) [https://github.com/brentvatne/react-native-modal](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fbrentvatne%2Freact-native-modal) [https://github.com/bodyflex/react-native-simple-modal](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fbodyflex%2Freact-native-simple-modal) * 按鈕特效 react-native-circle-button▼ **項目名稱：**react-native-circle-button**功能介紹：**可以支持雙平臺的原型菜單按鈕，作者靈感來源於國外設計網站dribbble，雖然可能項目用到的可能性比較小，但是可以看下實現過程。**倉庫地址：**[https://github.com/dwicao/react-native-circle-button](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fdwicao%2Freact-native-circle-button) * 酷炫摺疊動畫 react-native-foldview▼ **項目名稱：**react-native-foldview**功能介紹：**純 JS 代碼編寫的，一個帶摺疊動畫的列表項 UI 組件，可用在滾動列表中，展示列表詳情之類的，動畫效果也不錯。**倉庫地址：**[https://github.com/jmurzy/react-native-foldview](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fjmurzy%2Freact-native-foldview) * 這個是一個下拉選項組件 A react-native dropdown/picker/selector component for both Android & iOS. * 國人做的，貌似不錯，支持個。 **[react-native-modal-dropdown](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fsohobloo%2Freact-native-modal-dropdown)** **[cnblog的中文解釋](https://link.jianshu.com?t=http%3A%2F%2Fwww.cnblogs.com%2Fsohobloo%2Fp%2Freact-native-modal-dropdown.html)** * 一個比較美麗的提示氣泡toast **[react-native-root-toast](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fmagicismight%2Freact-native-root-toast)** * 圖片上拉放大:[https://github.com/lelandrichardson/react-native-parallax-view](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Flelandrichardson%2Freact-native-parallax-view) * npm install react-native-gifted-form --save [react-native-gifted-form](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2FFaridSafi%2Freact-native-gifted-form) * 顏色漸變 npm install react-native-linear-gradient --save [react-native-linear-gradient](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fbrentvatne%2Freact-native-linear-gradient) * npm i react-native-app-intro --save [react-native-app-intro](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Ffuyaode%2Freact-native-app-intro) * [https://github.com/spikef/react-native-gesture-password](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fspikef%2Freact-native-gesture-password) * [https://github.com/xudafeng/autoresponsive-react-native](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fxudafeng%2Fautoresponsive-react-native) * 一個下拉打開頁面，用在選項裏面賊好用 [react-native-accordion](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fnaoufal%2Freact-native-accordion) * 做通訊錄想必各位同學多多少少都要接觸吧?這個好用 [react-native-alphabetlistview](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fsunnylqm%2Freact-native-alphabetlistview) * 老闆要是讓你加自動填充怎麼辦?這邊有 [react-native-alphabetlistview](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fsunnylqm%2Freact-native-alphabetlistview) * [https://github.com/Dharmoslap/react-native-responsive-image](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2FDharmoslap%2Freact-native-responsive-image) * [https://github.com/vczero/react-native-tab-menu](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fvczero%2Freact-native-tab-menu) * [https://github.com/chirag04/react-native-tooltip](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fchirag04%2Freact-native-tooltip) * [https://github.com/aroth/react-native-uploader](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Faroth%2Freact-native-uploader) * [https://github.com/Cocoon-break/react-native-table-row](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2FCocoon-break%2Freact-native-table-row) * [https://github.com/Cocoon-break/react-native-table-row](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2FCocoon-break%2Freact-native-table-row) * [搜索框，帶歷史紀錄](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Ftuantle%2Freact-native-search-header) * [下拉警告](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Ftestshallpass%2Freact-native-dropdownalert) * [滑動動畫選擇](https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2FApp2Sales%2Freact-native-switch-selector) 轉自：[https://www.jianshu.com/p/c7a8f115dca0](https://www.jianshu.com/p/c7a8f115dca0)