【React Native】組件庫(親測版)

以下是自己在項目開發過程中使用過的,或者有接觸的組件庫,記錄如下:

---> 導航組件

native-base:React Native的基本跨平臺UI組件

---> 導航組件

react-navigation項目中使用過,較爲好用;但不同的版本有一定的區別;使用教程

react-native-tab-navigator:未使用過,功能預研時查詢到的,暫做記錄

react-native-scrollable-tab-view:未使用過,功能預研時查詢到的,暫做記錄

---> 啓動屏

react-native-splash-screen:未使用過,功能預研時查詢到的,暫做記錄

---> 引導頁

react-native-splashscreen:未使用過,功能預研時查詢到的,暫做記錄

---> 側滑出佈局

react-native-drawer

react-native-side-menu

---> 輪播圖

react-native-swiper項目中使用過,較爲好用

---> Loading

react-native-overlayer項目中使用過,較爲好用

react-native-spinkit

react-native-easy-loading項目中使用過,不建議使用,庫底層採用Modal組件渲染視圖,同時用state來控制loading的顯示隱藏,Modal容易與其他庫衝突,state狀態渲染界面不及時

---> Toast

react-native-root-toast項目中使用過,較爲好用,只是UI美化一般

---> Progress

react-native-progress

---> 彈出對話框

react-native-popup-dialog

react-native-dropdownalert:A simple alert to notify users about new chat messages, something went wrong or everything is ok. It can be closed by tap, cancel button, automatically with closeInterval, pan responder up gesture or programmatically

---> 模態框

react-native-root-modal:未使用過,功能預研時查詢到的,暫做記錄

react-native-modalbox:A react native component, easy, fully customizable, implementing the 'swipe down to close' feature.

---> 彈出菜單

react-native-popup-menu

---> 顏色漸變處理

react-native-linear-gradient

---> 指定格式的輸入框

react-native-masked-text

---> 圖片緩存

react-native-img-cache

---> 列表滑動刪除

react-native-swipeout

---> 列表下拉刷新

react-native-pull-to-refresh項目中使用過,較爲好用

---> 支持拖放的列表

react-native-sortable-listview

---> 圖表繪製

react-native-pathjs-charts

---> 餅狀圖繪製

react-native-pie

react-native-pie-chart

---> 不錯的交互效果

react-native-deck-swiper

---> 時間選擇器

react-native-date-picker

react-native-date-time-picker

react-native-datereact-native-picker

---> 日曆日期選擇器

react-native-dates

react-native-calendar-strip

---> 定時器

react-native-timer

---> 鍵盤遮擋處理

react-native-keyboard-aware-scroll-view

react-native-keyboard-manager:Library to prevent issues of keyboard sliding up and cover inputs on React-Native iOS projects ;This is only for iOS, Android no needed. For Android just add android:windowSoftInputMode="adjustResize" to your activity.

---> 獲取設備信息

react-native-device-info項目中使用過,較爲好用;使用教程

---> 設備權限檢查

react-native-permissions項目中使用過,較爲好用;使用教程

---> 獲取聯繫人

react-native-contacts

---> 二維碼掃描

---> 二維碼生成器

react-native-qrcode-svg

---> 藍牙

react-native-ble-manager

---> 錄音

react-native-audio

---> 視頻播放

react-native-video

---> 文件選擇

react-native-fs

---> 文件解壓

react-native-zip-archive

---> 圖片選擇及剪裁

react-native-image-crop-picker:iOS/Android image picker with support for camera, video, configurable compression, multiple images and cropping;使用教程

---> 地圖

react-native-maps:谷歌地圖 項目中使用過,較爲好用

react-native-amap3d:高德地圖 項目中使用過,較爲好用

---> 指紋登錄

react-native-touch-id項目中使用過,較爲好用

---> 集成微信sdk

react-native-wechat項目中使用過,較爲好用

---> 極光推送

jpush-react-native項目中使用過,較爲好用;使用教程

---> 友盟推送

react-native-umeng-push

---> sqlite數據庫存儲

react-native-sqlite-storage

---> 熱更新部署

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章