1. 程式人生 > >React Native開發中常用三方元件庫

React Native開發中常用三方元件庫

點選開啟連結



 
  

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

導航元件 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

裝置資訊

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

側欄

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

可滑動的底部或上部導航欄框架

react-native-scrollable-tab-view

https://github.com/skv-headless/react-native-scrollable-tab-view

底部或上部導航框架(不可滑動)

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

簡易路由跳轉框架

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 目錄作為本地檢視的控制元件,其風格可以定製

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

側滑按鈕

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

語言轉化和一些常用格式轉換

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/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的優化

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-bridge相關

https://github.com/alinz/react-native-webview-bridge

判斷橫豎屏

https://github.com/yamill/react-native-orientation

PDF

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/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

模態檢視

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

gif

動畫

https://github.com/oblador/react-native-animatable

gif

圖示

https://github.com/oblador/react-native-vector-icons

gif

圖片選擇器(可多選)

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

側欄

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.jianshu.com/p/eceb7e66fa5e

載入動畫

https://github.com/maxs15/react-native-spinkit

側滑按鈕

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

模態檢視

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 引導頁

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

image

tip提示框

https://github.com/chirag04/react-native-tooltip

image

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

image

IM聊天介面

https://github.com/Ice-MT/react-native-imUI

image 作者:光強_上海 連結:https://www.jianshu.com/p/18fd4b438958 來源:簡書 著作權歸作者所有。商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。