React-Native開發中常用的第三方控制元件持續更新
筆者簡書:https://www.jianshu.com/u/8ba7c349861d, 歡迎大家關注
2018.8.23更新:
動態修改Android的softmodule:
react-native-android-keyboard-adjust
2018.8.9更新:
資源列表:https://github.com/reactnativecn/react-native-guide
https://js.coach/
2018.7.31更新:
推薦一個不錯的React Native 元件和庫的資源列表:
https://reactnativeexample.com/
2018.7.27更新:
幾個UI元件庫:
https://www.jianshu.com/p/c7a8f115dca0
https://segmentfault.com/a/1190000010875332
React Native UI 元件庫, 超過 20 個純 JS(ES6) 元件, 專注於內容展示和操作控制。
https://github.com/rilyu/teaset/blob/HEAD/docs/cn/README.md
2018.7.18更新:
前輩整理的第三方:
[https://www.jianshu.com/p/bb5f68a236d3]https://www.jianshu.com/p/bb5f68a236d3
升級版的webview用於安卓平臺:react-native-webview-android
和listview搭配可以進行 內容從底部開始進行渲染
react-native-invertible-scroll-view
2018.7.5更新:
網格佈局:
https://www.npmjs.com/package/react-native-gridview
效能優化的可拖動排序的標籤元件react-native-drag-to-sort-tags
https://github.com/bolan9999/react-native-drag-to-sort-tags
2018.6.26更新:
網路請求框架:https://github.com/niftylettuce/frisbee
http://www.hangge.com/blog/cache/detail_1622.html
https://github.com/visionmedia/superagent/
2018.6.20更新:
一個IOS樣式的跨平臺(cross-platform)平臺的switch元件
https://github.com/react-native-studio/react-native-switchbutton
基於android SmartRefreshLayout https://github.com/scwang90/SmartRefreshLayout 開發的外掛,可提供類似ios的彈性重新整理
https://github.com/react-native-studio/react-native-SmartRefreshLayout
2018.6.8更新:
跨平臺資料庫開發元件:
https://github.com/andpor/react-native-sqlite-storage
生成二維碼:
https://github.com/cssivision/react-native-qrcode
生成各類圖表:
https://github.com/tomauty/react-native-chart
https://github.com/wuxudong/react-native-charts-wrapper
https://github.com/capitalone/react-native-pathjs-charts
基於 React Native 實現的支付寶錢包 UI 介面:
https://github.com/superRaytin/react-native-alipay
整合微信功能:
https://github.com/yorkie/react-native-wechat
對ListView/FlatList的封裝,可以很方便的分頁載入網路資料,還支援自定義下拉重新整理View和上拉載入更多的View
https://github.com/geek-prince/react-native-page-listview
時間選擇框
https://github.com/xgfe/react-native-datepicker
2018.6.7更新:
懸浮效果的按鈕:
https://github.com/mastermoo/react-native-action-button
下拉框控制元件react-native-modal-dropdown
https://github.com/sohobloo/react-native-modal-dropdown
跨三端開發模組(Android/Ios/Web)+ 狀態管理框架dva
https://github.com/blankapp/react-native-template-ui-based
2018.5.30更新:
react-native 身份證掃描(Android版)
https://www.npmjs.com/package/react-native-scanidcard
2018.5.11更新:
載入多張圖片,並新增快取,快速瀏覽:react-native-fast-image:
https://github.com/DylanVann/react-native-fast-image
React Native SSH SFTP 元件:
https://www.jianshu.com/p/504a4b3ec34d
React Native使用百度Echarts顯示圖表:
https://www.jianshu.com/p/68cd9af0bff4
2018.5.10更新:
基於ART的SVG庫:https://github.com/react-native-community/react-native-svg
2018.4.19更新:
2018 年 2 月 15 個有意思的 JavaScript 和 CSS 庫:
https://www.jianshu.com/p/bee270f34e75
react-native-pull-refresh-view:適配Android和Ios
https://github.com/reactnativecomponent/react-native-pull-refresh-view
react-native適配iPhoneX 目前最簡單的方法:
http://bbs.reactnative.cn/topic/5418/react-native%E9%80%82%E9%85%8Diphonex-%E7%9B%AE%E5%89%8D%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%96%B9%E6%B3%95
一個ReactNative仿網易新聞的Demo:
https://github.com/h406621397/NeteaseNews
React Native如何使用自定義的iconfront:
https://juejin.im/post/5ac80a265188255569193bb0
2018.4.8更新:
高德地圖外掛: https://gitee.com/1148030615/rn-AmapLocation
腳手架:https://github.com/Murrayee/murray
2018.3.6更新:
React Native開發實用技巧
https://www.jianshu.com/p/ccba80f34f33
最靈活的UI控制元件庫:React Native UI Lib
https://www.jianshu.com/p/c2771ff962a4?utm_campaign=maleskine&utm_content=note&utm_medium=reader_share&utm_source=weibo
一個android彈幕外掛
https://github.com/react-native-studio/react-native-android-danmaku
與 react-native-amap3d 相似,除此之外還實現了:
獨立定位模組
地理編碼/逆地理編碼
點聚合元件
Mastering React Native(React Native高階教程電子書)
Word版:Mastering React Native
https://www.jianshu.com/u/3a2d89402aca
2018.2.8更新:
React Native TTS is a text-to-speech library for React Native on iOS and Android.
https://github.com/ak1394/react-native-tts
2018.2.1更新:
SuperAgent 是一個流行的第三方 Ajax 庫,專注於處理服務端/客戶端的 http 請求。
對比現存的各種請求 API 庫,SuperAgent 更加輕量、優雅、易讀、易學。
最重要的是它可以用於 Node.js
GitHub 主頁地址:https://github.com/visionmedia/superagent/
原文出自:www.hangge.com 轉載請保留原文連結:http://www.hangge.com/blog/cache/detail_1622.html
2018.1.25更新:
React Native 截圖元件:react-native-view-shot,可以擷取當前螢幕或者按照當前頁面的元件來選擇擷取,如當前頁面有一個圖片元件,一個View元件,可以選擇擷取圖片元件或者View元件。支援iOS和安卓。
2018.1.5更新
錄音:
react-native-audio
https://github.com/jsierles/react-native-audio
播放:
react-native-sound
https://github.com/zmxv/react-native-sound
2018.1.4更新
進度條
https://github.com/oblador/react-native-progress
https://www.jianshu.com/u/c79c9f26d774
2017.12.28更新
Axios 是一個基於 promise 的 HTTP 庫,可以用在瀏覽器和 node.js 中。
中文文件:https://www.kancloud.cn/yunye/axios/234845
英文文件:https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format
使用:https://www.jianshu.com/p/df464b26ae58
2017.12.25更新
Axios 是一個基於 promise 的 HTTP 庫,可以用在瀏覽器和 node.js 中。
https://www.kancloud.cn/yunye/axios/234845
2017.12.23更新
react-native-vector-icons 向量字型庫圖示
react-native-i18n 多語言-國際化外掛
react-native-image-viewer 圖片預覽
react-native-textinput-effects 輸入框
2017.12.19更新
極客學院:http://wiki.jikexueyuan.com/project/react-native/
2017.12.8更新
react native 輪播元件:支援迴圈,橫豎輪播,支援卡片樣式顯示
https://github.com/easyui/react-native-ezswiper
基於EZPlayer封裝的視訊播放器,功能豐富,快速整合,可定製性強的rn元件
https://github.com/easyui/react-native-ezplayer
2017.12.7更新
https://github.com/JackPu/react-native-percentage-circle
2017.11.28更新
react-native-popup-dialog
2017.11.23更新
React Native開源特效動畫封裝庫模組(lottie-react-native)
開源專案地址:https://github.com/airbnb/lottie-react-native
2017.11.13更新
react native學習筆記13——FlatList上拉載入
二維碼掃描
2017.10.26更新
react native 漸變元件 react-native-linear-gradient
github: https://github.com/react-native-community/react-native-linear-gradient
一個圖片多選元件 react-native-syan-image-picker
GitgHub react-native-syan-image-picker
2017.10.17更新
聊天元件
aurora-imui-react-native
使用請參考:http://www.jianshu.com/p/3557b55db81c
2017.10.11更新
解決鍵盤遮擋問題
https://github.com/APSL/react-native-keyboard-aware-scroll-view
2017.9.28更新
https://github.com/cheng-kang/react-native-lahk-marquee-label-vertical
這是一個從下向上滾動的跑馬燈。
如果需要從右往左滾動的跑馬燈,請使用react-native-lahk-marquee-label。
2017.9.27更新
react-native-keyboard-aware-scroll-view
適用於 scrollView、ListView、FlatList、SectionList 上有輸入框的問題
解決鍵盤擋住輸入框問題
點選按鈕讓scrollView滾動到指定位置
http://www.jianshu.com/p/e7f26851b9e8
2017.9.15 更新
讀取PDF檔案
https://github.com/wonday/react-native-pdf
語音播報:
https://github.com/somonus/react-native-speech
2017.9.11 更新
switch 開關
https://github.com/shahen94/react-native-switch
IOS和Android白屏
react-native-splash-screen
側滑欄
https://github.com/root-two/react-native-drawer
帶索引的分類列表,通訊錄,省市地址等
https://github.com/rgovindji/react-native-atoz-list
react-native之站在巨人的肩膀上
http://www.cnblogs.com/skylor/p/5783824.html
2017.8.29 更新
React Native 【 第三方分享 】、【 第三方登入 】. 支援平臺:QQ、QQ空間、微信、朋友圈、新浪微博、FaceBook... 【 Android、 IOS 雙平臺 】
專案地址:https://github.com/songxiaoliang/react-native-share
使用:http://blog.csdn.net/u013718120/article/details/75040805
2017.8.22 更新
基於FlatList的下拉、上拉重新整理元件
react-native-refresh-list-view
倒計時元件
https://github.com/ljunb/rn-countdown
react-native-agora 基於Agora(YY技術團隊)直播,視訊會議元件
https://github.com/DBshaoYan/react-native-agora
相關資源文章
https://yq.aliyun.com/articles/78154?t=t1
http://www.jianshu.com/p/53ff78168acc
掃描二維碼
https://github.com/MarnoDev/AC-QRCode-RN
複選按鈕--checkbox
https://github.com/crazycodeboy/react-native-check-box
單選按鈕-radioButton
https://github.com/wayne214/react-native-flexi-radio-button
http://makaidong.com/sinat_17775997/1/322_11689039.html
持久化儲存
https://github.com/almost/react-native-sqlite
https://realm.io/docs/react-native/latest/
獲取許可權
https://github.com/yonahforst/react-native-permissions
檔案上傳
https://github.com/eduedix/react-native-networking
拍照:
https://github.com/remobile/react-native-camera
視訊錄製:
https://github.com/phuochau/react-native-beautiful-video-recorder
react-native-camera是一個第三方的開源庫,我們可以通過它來呼叫裝置的攝像頭,
從而實現拍照、或者錄影功能。
react-native-camera功能強大,我們可以選擇使用哪個攝像頭、是拍照還是錄影、是否錄製聲音、是否開啟閃光燈、檢視比例、拍攝質量、拍攝方向、觸控功能、條形碼/二維碼掃描等等。
GitHub主頁地址:https://github.com/lwansbrough/react-native-camera
一個功能完善的 react-native 高德地圖元件:
https://github.com/qiuxiang/react-native-amap3d
React Native中的懶載入(lazyload)
https://github.com/magicismight/react-native-lazyload
圖片快取方案:
https://github.com/wcandillon/react-native-img-cache
https://github.com/remobile/react-native-cache-image
https://github.com/MarnoDev/react-native-open-project
手勢縮放圖片:
https://github.com/ldn0x7dc/react-native-transformable-image
彈框-全遮蓋的彈出層
諸多reactNative第三方控制元件,助大家一臂之力
https://js.coach/react-native
IOS or Android白屏問題
react-native-splash-screen
Toast吐司:
https://github.com/remobile/react-native-toast
https://github.com/crazycodeboy/react-native-easy-toast
https://github.com/RazerTang/react-native-root-toast2
日曆控制元件:
https://github.com/airbnb/react-dates
https://github.com/wix/react-native-calendars/blob/master/README.md
https://www.npmjs.com/package/react-native-calendars
加解密庫:
crypto-js
時間選擇器
react-native-picker
https://github.com/beefe/react-native-picker
座標轉換
以後處理座標轉換可能會用到的,用到的時候再看https://github.com/wandergis/coordtransform
Button按鈕
簡單的按鈕控制元件
https://github.com/APSL/react-native-button
react-native-speech
語音播報元件
react-native-snap-carousel
簡單的輪播框元件,帶有斷裂效果,應用於Android和iOS
呼叫系統的電話、簡訊、郵件、瀏覽器:
三方元件:react-native-communications
地址:https://github.com/anarchicknight/react-native-communications
網址裡面的 README.md 寫的非常的清楚,而且還有例子可供參考,相當方便,iOS和Android親測沒有問題
強烈推薦大家看一下
輪播圖:npm install react-native-swiper--save
倒計時:npm install react-native-sk-countdown --save
React Native 專案常用第三方元件彙總:
react-native-uploader //檔案上傳
https://github.com/aroth/react-native-uploader
0.gif
jpush-react-native //官方版本
https://github.com/jpush/jpush-react-native
react-native-jpush 由 React Native 中文網開發維護。
https://github.com/reactnativecn/react-native-jpush
pouchdb-react-native pouchdb外掛
react-native-animatable 動畫
react-native-carousel 輪播
react-native-countdown 倒計時
https://github.com/jackuhan/react-native-CountDowntimer 倒計時
react-native-device-info 裝置資訊
react-native-fileupload 檔案上傳
react-native-icons 圖示
https://github.com/oblador/react-native-vector-icons 圖示
react-native-image-crop-picker 圖片選擇器
react-native-image-picker 圖片選擇器
關於圖片選擇器的配置:http://www.cnblogs.com/shaoting/p/6148085.html
react-native-keychain iOS KeyChain管理
react-native-picker滾輪選擇器: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/lovebing/react-native-baidu-map
動畫
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
日曆彈出@IOS和Android
https://github.com/wayne214/react-native-modal-datetime-picker
語言轉化和一些常用格式轉換
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
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/wayne214/react-native-swRefresh
下拉選擇
https://github.com/alinz/react-native-dropdown
https://github.com/WheelerLee/react-native-dropdown-menu
圖片檢視
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
工程目錄下終端輸入 npm i XXX save
http://www.jianshu.com/p/e3ee0ab1eb82
Axios 是一個基於 promise 的 HTTP 庫,可以用在瀏覽器和 node.js 中。
react-native-progress
與 react-native-amap3d 相似,除此之外還實現了:
獨立定位模組
地理編碼/逆地理編碼
點聚合元件
最靈活的UI控制元件庫:React Native UI Lib
React Native開發實用技巧
https://gitee.com/1148030615/rn-AmapLocation
https://github.com/easyui/react-native-ezswiper