2018，React Native第三方組件庫彙總

時間 2019-11-17

原文原文鏈接

移動跨平臺框架React Native通過4年的發展，其生態已經變得異常豐富，在使用React Native開發項目的過程當中，爲了提升開發效率，咱們常常會借鑑一些使用使用率比較高的開源庫，根據大衆的需求，對這些使用較高的 React-Native UI 庫，咱們作一個簡單的總結和歸類，方便你們更好地入門 React Native。react

本文只是收集了一些常見的UI庫和功能庫，除了上面介紹的知名第三方庫以外，還有不少實現小功能的庫，這些庫能夠大大的提升咱們的開發效率，而且能夠在此基礎上進行二次開發。而且歡迎你們關注個人《React Native移動開發實戰》，第二版修改版會再近期再版，歡迎持續關注。ios

第三方庫

UI套件

1， NativeBase

NativeBase 是一個廣受歡迎的 UI 組件庫，爲 React Native 提供了數十個跨平臺組件。在使用 NativeBase 時，你可使用任意開箱即用的第三方原生庫，而這個項目自己也擁有一個豐富的生態系統，從有用的入門套件到可定製的主題模板。 NativeBase 項目地址: github.com/GeekyAnts/N… 入門學習地址: reactnativeseed.com/git

2，React Native Elements

React Native Elements是一個高度可定製的跨平臺 UI 工具包，徹底用 Javascript 構建。該庫的做者聲稱「React Native Elements 的想法更多的是關於組件結構而不是設計，這意味着在使用某些元素時能夠減小樣板代碼，但能夠徹底控制它們的設計」，這對於開發新手和經驗豐富的老手來講都頗有吸引力。 React Native Elements 項目地址: github.com/react-nativ… React Native Elements 示例項目： react-native-training.github.io/react-nativ…github

3，Shoutem

Shoutem也是一個 React Native UI 工具包，由 3 個部分組成：UI 組件、主題和組件動畫。該庫爲 iOS 和 Android 提供了一組跨平臺組件，全部組件都是可組合和可定製的。每一個組件還提供了與其餘組件一致的預約義樣式，這樣能夠在無需手動定義複雜樣式的狀況下構建複雜的組件。web

項目地址：shoutem.github.io/ui/react-native

4， UI Kitten

UI Kitten這個庫提供了一個可定製和可重複使用的 react-native 組件工具包，該工具包將樣式定義移到特定位置，從而能夠單獨重用組件或爲組件設置樣式。經過傳遞不一樣的變量，能夠很容易地「動態」改變主題樣式。項目地址: github.com/akveo/react… 項目體驗地址：expo.io/@akveo/ui-k…babel

5，React Native Material UI

React Native Material UI是一組高度可定製的 UI 組件，實現了谷歌的 Material Design。請注意，這個庫使用了一個名爲 uiTheme 的 JS 對象，這個對象在上下文間傳遞，以實現最大化的定製化能力。antd

React Native Material UI 項目地址: github.com/xotahal/rea… 包含庫組件及示例的清單： github.com/xotahal/rea…app

###6，React Native Material Kit React Native Material Kit是一套頗有用的 UI 組件和主題，實現了谷歌的 Material Design。不過須要說明的是， React Native Material Kit在2017 年 12 月以後就中止維護了。項目地址: github.com/xinthink/re…框架

###7，Nachos UI Nachos UI 是一個 React Native 組件庫，提供了 30 多個可定製的組件，這些組件也能夠經過 react-native-web 在 Web 上運行。它經過了快照測試，支持格式化和 yarn，提供了熱火的設計和全局主題管理器。項目地址: github.com/nachos-ui/n…

8，React Native UI Library

Wix 工程公司正致力於開發這個最早進的 UI 工具集和組件庫，它還支持 react-native-animatable 和 react-native-blur。這個庫附帶了一組預約義的樣式預設（轉換爲修飾符），包括 Color、Typography、Shadow、Border Radius 等。項目地址: github.com/wix/react-n…

9，React Native Paper

React Native Paper是一個跨平臺的 UI 組件庫，它遵循 Material Design 指南，提供了全局主題支持和可選的 babel 插件，用以減小捆綁包大小。 React Native Paper 項目地址: github.com/callstack/r…

Expo 示例應用程序： expo.io/@satya164/r…

10，React Native Vector Icons

React Native Vector Icons是一組 React Native 的可定製圖標，支持 NavBar/TabBar/ToolbarAndroid、圖像源和完整樣式。它很是有用，並且被數千個應用程序以及其餘 UI 組件庫（如 react-native-paper）所使用。項目地址: github.com/oblador/rea… 示例項目：oblador.github.io/react-nativ…

###11，Teaset Teaset是一個 React Native UI 庫，提供了 20 多個純 JS（ES6）組件，用於內容顯示和動做控制。雖然它的文檔不夠詳盡，但它簡潔的設計吸引了個人眼球。項目地址：github.com/rilyu/tease…

其餘庫

###1，antd-mobile antd-mobile是由螞蟻金融團隊推出的一個開源的react組件庫，這個組件庫擁有不少使用的組件。

項目地址： github.com/ant-design/…

###2，react-native-button react-native-button是github上一個開源的button組件，目前仍保持比較快的更新頻率，提供比較豐富的Button功能。項目地址：github.com/ide/react-n…

###3，react-native-image-viewer react-native-image-viewer是一個圖片大圖瀏覽的庫，點擊圖片能夠放大縮小。

項目地址： github.com/ascoders/re…

4，react-native-image-picker

react-native-image-picker是實現多個圖像選擇、裁剪、壓縮等功能的第三方庫，可使用該庫實現圖片、照相等操做。

項目地址： github.com/react-commu…

###5，react-native-picker react-native-picker是React native最多見的滾輪控件，能夠實現單滾輪、雙滾輪和三滾輪效果。

項目地址： github.com/beefe/react…

###6，react-native-scrollable-tab-view react-native-scrollable-tab-view是一個帶有TabBar和可切換頁面的控件。，在Android中能夠當作是ViewPager和TabLayout的結合。項目地址：github.com/happypancak…

###7，react-native-app-intro react-native-app-intro是實現引導頁的庫，固然開發者也能夠本身手動實現。

項目地址：github.com/fuyaode/rea…