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

xiangzhihong發表於2019-03-04

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

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

第三方庫

UI套件

1， NativeBase

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

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…

3，Shoutem

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

專案地址：shoutem.github.io/ui/

4， UI Kitten

UI Kitten這個庫提供了一個可定製和可重複使用的 react-native 元件工具包，該工具包將樣式定義移到特定位置，從而可以單獨重用元件或為元件設定樣式。通過傳遞不同的變數，可以很容易地“動態”改變主題樣式。專案地址: github.com/akveo/react… 專案體驗地址：expo.io/@akveo/ui-k…

5，React Native Material UI

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

React Native Material UI 專案地址: github.com/xotahal/rea… 包含庫元件及示例的清單： github.com/xotahal/rea…

###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…