ReactNative開發常用的三方模塊

寫在前面

一個好的App缺不了好的三方支持，生活在ReactNative這個活躍的開源社區，尋找合適的三方組件是一個開發者最基本的能力。不過不積跬步，無以至千里，不積小流，無以成江海。下面分享幾個我收集的三方模塊，希望對大家有點幫助。

文件上傳 react-native-uploader

github地址： https://github.com/aroth/reac...

評價：支持多圖上傳和上傳進度顯示，demo比較粗糙。項目已經停止更新 4個月

<!--more-->

毛玻璃效果 react-native-blur

github 地址： https://github.com/react-nati...

評價：星星比較多，支持3種常見的毛玻璃效果，不錯的組件。

圖片輪播

• react-native-viewpager

GitHub 地址： https://github.com/race604/re...

評價：實際使用過，輪播效果比較普通，算比較實用吧

• react-native-looped-carousel

GitHub 地址： https://github.com/appintheai...

評價：demo比較精致，可以嘗試

• react-native-app-intro

GitHub 地址： https://github.com/FuYaoDe/re...

評價：星星比較多，適合做App進入的引導頁

圖片選擇

• react-native-image-picker

GitHub 地址： https://github.com/marcshilli...

評價：實際使用過，功能強大，兼容性好。但是不支持多圖

• react-native-image-crop-picker

GitHub 地址： https://github.com/ivpusic/re...

評價：功能類似，但支持多圖

獲取設備信息 react-native-device-info

GitHub 地址： https://github.com/rebeccahug...

評價：文檔比較細致，算是靠譜的組件

ListView優化替代組件 react-native-sglistview

GitHub 地址： https://github.com/sghiassy/r...

評價：用法簡單，可以減小ListView運行占用的內存

二維碼識別 react-native-qrcode-reader

github 地址： https://github.com/starknx/re...

評價：比較實用的功能

手勢解鎖 react-native-gesture-password

GitHub 地址： https://github.com/SunflowerG...

評價：為App添彩的功能

GitHub 地址： https://github.com/starknx/re...

評價： 星星比較少，項目1年未更新，謹慎使用

鍵盤遮擋問題解決

評價：新版RN的 KeyboardAvoidingView 組件可以解決這個問題

圖片查看 react-native-gallery

GitHub 地址： https://github.com/ldn0x7dc/r...

評價：支持輪播和 放大查看

3D Touch react-native-quick-actions

GitHub 地址： https://github.com/madriska/r...

評價：為App添彩的功能，但不是必須的

可滑動的日歷組件 react-native-myCalendar

GitHub 地址： https://github.com/cqm1994617...

評價：demo 耦合性略高

可拖拽元素 react-native-gesture-recognizers

GitHub 地址： https://github.com/johanneslu...

評價：比較有趣的功能

下拉放大 react-native-parallax-view

GitHub 地址： https://github.com/lelandrich...

評價：這個功能適合帶圖片的詳情頁

簡單圖表 react-native-chart

GitHub 地址： https://github.com/tomauty/re...

評價：比較成熟的項目，放心使用

側滑按鈕 react-native-swipeout

GitHub 地址： https://github.com/dancormier...

評價：如果放在水平滾動的容器里會有BUG

抽屜功能 react-native-drawer

GitHub 地址： https://github.com/root-two/r...

評價：實際使用過，性能還不錯，可放心使用

加載動畫 react-native-spinkit

GitHub 地址： https://github.com/maxs15/rea...

評價：比較有趣的動畫，為項目添彩

登錄動畫 react-native-login

GitHub 地址： https://github.com/brentvatne...

評價：動畫為mp4格式

動畫組件 react-native-animatable

GitHub 地址： https://github.com/oblador/re...

評價：為元素添加靈動感，比較實用

即時通訊

• react-native-gifted-chat

GitHub 地址： https://github.com/FaridSafi/...

評價：支持發送位置和圖片

• react-native-imUI

GitHub 地址： https://github.com/Ice-MT/rea...

評價：從項目里抽取出來的demo，UI做的挺萌，有發送語音功能

精致的輸入框 react-native-textinput-effects

GitHub 地址： https://github.com/halilb/rea...

評價：為項目添彩的功能

表單驗證 react-native-gifted-form

GitHub 地址： https://github.com/FaridSafi/...

評價：比較實用，適合用在復雜的表單

UI組件庫

• NativeBase

github： https://github.com/GeekyAnts/...

在線文檔： http://nativebase.io/docs/v0....

評價：組件比較多，不過設計風格一般

• shoutem

團隊github: https://github.com/shoutem

在線文檔： http://shoutem.github.io/docs...

評價：組件豐富，設計風格酷炫、團隊也比較牛逼

• Teaset

github: https://github.com/rilyu/teaset

評價：國人作品，組件豐富，設計風格簡約，比較適宜新手實用吧

• react-native-material-design

GitHub 地址： https://github.com/react-nati...

評價：純js編寫，沒有依賴，demo用的是Android

• react-native-elements

github: https://github.com/react-nati...

在線文檔： http://react-native-material-...

評價：ReactNative作者操刀領導的作品，值得擁有

• react-native-ui-kitten

github: https://github.com/akveo/reac...

在線文檔： https://akveo.github.io/react...

評價：一個酷炫簡單的App組件Demo，適合新手學習

<p>@參考： React Native 項目常用第三方組件匯總</p>

歡迎關注我的個人博客 Jafeney

 

來自：https://segmentfault.com/a/1190000008878128