當您處理下一個應用程序項目時，React Native組件庫可以節省大量時間。怎麼會？好吧，讓我們從React本身開始。您可能知道React是一個開放源代碼的JavaScript庫，可幫助為基於Web的應用程序和移動應用程序構建用戶界面。它包含許多可以輕鬆用於應用程序的組件。
通常，在React中構建組件時，您需要對它們進行樣式設置，以適應目標平台的準則。這就是React Native可以提供幫助的地方。該框架可用於通過使用React和目標平台的本機功能來開發移動應用。
之前，我們寫了一篇介紹最佳UI組件庫和框架的文章。在這篇文章中，我們將專門研究React Native組件庫。
年度最佳React Native組件庫
1. NativeBase
如果您發現自己為不同平台重寫了React組件，則應該使用NativeBase這個動態的前端框架。該庫是必需的跨平台React Native組件的集合，是開始構建應用程序的好地方。這些組件是使用React Native構建的，並結合了一些具有可自定義屬性的JavaScript功能。您也可以直接使用任何第三方本機庫。
NativeBase是完全開源的，在Github上擁有12,000多個星星。但是，隨著更多功能和屏幕的添加，主題變得極為珍貴。現在，NativeBase也可用於Web用戶。使用相同的JavaScript代碼庫，並針對Android和iOS使用特定於平台的設計，您可以為應用程序實現本機外觀。他們的開源項目包括本機入門應用程序，Twitter克隆應用程序，ToDo應用程序和教程應用程序。在他們的高級會員籃子中，您會找到用於預訂，租賃，職位列表，消息傳遞等的入門應用程序。
2.材料套件React Native
Material Kit React Native提供了帶有材料設計的免費本機應用模板。藉助Galio框架構建，它重新設計了最常見的組件，以使事物最小化並與Google的材質設計保持一致。它易於使用，並包含100多種手工製作的元素，例如按鈕，卡片，導航和輸入。通過更改主題，所有組件均可呈現顏色變化。此外，還有五個自定義插件和五個示例頁面。
在Github上擁有近200個星星，它還提供了Pro版本，使您可以訪問更多示例頁面和文檔。
3.反應本機元素
React Native Elements是一個跨平台的React Native UI工具包，它將開發人員製作的許多出色的開源UI組件放在一起。您可以使用React Native Elements組合在一起的包，並確保API具有一致的外觀。毫不奇怪，它在Github上獲得了17,000顆星。
該軟體包包括一整套組件，例如定價，徽章，覆蓋，分隔線和特定於平台的搜索欄。它們易於使用且真正可定製。所有組件的道具都定義在一個中央位置，這使得可以輕鬆地更新或修改組件。此外，它還可以作為一個平台，將小團隊開發具有開源貢獻的商業React Native應用程序連接起來。
要將React Native用於基於Web的項目，請使用React Native Web。它允許使用JavaScript創建快速，自適應的UI，並與React Dev工具集成。您將能夠在React Native應用程序和網路應用程序之間共享代碼庫。它支持鍵入，單擊或滑動作為輸入模式，具有內置的可訪問性和RTL支持，並且被Twitter，Uber和Flipkart之類的人使用。
4. React Native的Lottie
Lottie是Airbnb的手機庫，可幫助您嚮應用中添加動畫。通常，在Adobe After Effects中創建動畫後，您需要將其轉換為可在網路應用中使用的格式。 Lottie可以幫助您。
它通過從After Effects擴展BodyMovin導出JSON格式的動畫數據來工作。該擴展程序與JS播放器捆綁在一起，可在網路上渲染動畫。它也可以與React Native一起使用，您可以訪問Github上的官方文檔，該文檔已獲得近12,000星的支持。
Lottie庫和插件是免費提供的，並且您可以使用精選的動畫文件集合來使您的應用更具吸引力。動畫文件較小，為矢量格式。因此，您不應對應用程序的性能產生任何影響。同時，它可以為您的UI增添趣味，並使其在視覺上更具吸引力。
5.反應本機矢量圖標
如果您要尋找的是在應用程序中使用的某些圖標，那麼這是最好的React Native組件庫之一。擁有3,000多個圖標庫，您幾乎可以肯定找到了滿足您需求的內容。而且，可以在將圖標集成到項目中的同時對其進行自定義，樣式設置和擴展。
該軟體包支持Android的TabBar和工具欄，以及圖像源和多種樣式的字體。在Github上擁有近12,000個星星，它非常適合按鈕，徽標和導航欄。它利用React Native的動畫庫將其與任何圖標結合起來以創建動畫組件。如果您已經具有帶有關聯CSS文件的圖標字體，則可以輕鬆地使用generate-icon腳本生成圖標集。
6.點燃CLI
Ignite CLI是用於React Native應用程序的可靠入門工具包。完全免費，默認的React Native樣板可輕鬆幫助您構建本機應用程序。它安裝簡便，並遵循最佳施工實踐，同時允許您根據您的項目調整鍋爐板。開箱即用，它適用於Android和iOS。也支持獨立插件。
另外，您可以從許多樣板中選擇或自己創建。模塊化插件系統允許您添加應用程序功能或編寫自己的功能。使用示例屏幕可幫助您測試第三方庫並構建由多個組件組成的應用程序。該屏幕還包含使用基本組件構建的常用應用程序的示例。為了幫助您識別組件並輕鬆進行更改，此屏幕還將示例保存在組件文件中。在此屏幕上，您可以測試，使用和與團隊共享組件。 Ignite CLI已在Github上贏得10,000顆以上的星。
7. React Native Mapview
提供用於Android和iOS的地圖組件的React Native組件庫之一是React Native Mapview。它的構造使得可以將任何地圖上的規則要素（例如標記和多邊形）指定為Mapview組件的子級。這有助於API直觀地聲明性地控制地圖上的要素。就您而言，您需要確保在Google控制台中啟用Google Maps API。
您可以做很多事情來定製地圖樣式。您將能夠更改地圖視圖的位置，跟蹤區域/位置，並使景點在Google地圖上可點擊。您可以啟用放大到指定的標記或坐標，甚至為它們設置動畫。如果您為道具分配了動畫區域值，則Mapview可以利用Animated API來控制地圖的中心和縮放。除非您指定自定義標記，否則將呈現默認標記。
很棒的是，標記是可拖動的，可以使用圖像進行自定義，並且在拖動過程中會更新其他用戶界面。如果需要更多功能，可以自定義標註，標記創建者，多邊形創建者以及圓形和多邊形疊加層。 iOS用戶可以創建漸變折線。不足為奇的是，它在Github上擁有10,000顆以上的星星。
8.響應本地天才聊天
顧名思義，React Native Gifted Chat將幫助您為React Native（和Web）設置聊天UI。它與TypeScript一起編寫，包括完全可自定義的組件，可幫助載入早期消息或將消息複製到剪貼板等。還有一個InputToolbar，可以幫助用戶跳過鍵盤。
為了增強用戶體驗，它啟用了頭像作為用戶的姓名首字母，本地化日期，多行TextInput，快速回復消息（bot）和系統消息。還支持Redux。天才聊天在Github上擁有8,000多個星級。
9. React Native UI小貓
可以用作任何領域（包括電子商務）的移動應用程序入門工具包的React Native組件庫之一是React Native UI Kitten – Eva Design系統的React Native實現。它在Github上獲得了5,000+顆星的評級，提供了大約20種通用組件的樣式集，這些組件的樣式相同，以照顧視覺外觀。
有了這個永遠免費的開源庫，您可以使用提供的主題，也可以創建自己的主題，而無需更改組件的源代碼。此外，您可以在運行時在深色和淺色主題之間切換，而無需重新載入頁面。從NPM安裝UI Kitten軟體包後，就可以導入組件並開始在項目中使用它們。
10. React Native Paper
另一個免費的開源庫是React Native Paper。它具有所有主要組件，並且這些組件的設計均符合Google的材料設計標準。
Paper是跨平台的，可在Web和移動設備上使用。有一些組件和交互方式可以適應幾乎每種用例場景。包括動畫，可訪問性和UI邏輯在內的大多數細節都得到了照顧。您可以自定義默認顏色或製作自己的顏色。此外，您還具有完整的主題支持，以及在暗模式和亮模式之間切換的選項。在Github上，它可以容納4,000多個星星。
11. React Native材料工具包
我們的React Native組件庫列表中的下一個是另一套UI組件，它們將材料設計帶入React Native。在內部，您會找到按鈕，卡片，範圍滑塊和文本欄位。您還將看到微調器和進度條以顯示負載，以及切換開關，單選按鈕和複選框的切換。
只需幾行代碼，即可使用符合Material design lite默認主題的預定義構建器添加按鈕。使用構建器，您還可以從頭開始創建自定義按鈕。內置文本欄位也是如此。不僅如此，您還可以通過更改全局主題來自定義樣式。這將影響整個應用程序中的所有複選框和單選按鈕。在Github上，該圖書館獲得了4,465顆星。
12. React Native Material UI
React Native Material UI為React Native提供了將近20個組件。這些組件包括操作按鈕，化身，子標題，抽屜，分隔線，工具欄等。這些組件是高度可定製的，並在其構造中使用材料設計。您對主題進行的任何自定義也可以擴展到其他組件，包括您自己構建的任何組件。可以通過在需要時覆蓋樣式來進行本地更改。
如果您已經在使用React Native Vector Icons，則無需進行任何安裝。否則，您需要下載適用於Android的素材圖標，並確保您具有適用於iOS的Roboto。該圖書館在Github上獲得了3,000多個星級。
13. RNUILIB
RNUILIB包含60多個組件，可在Github上計時近2,000星。通過包含所有組件的實時示例，您可以在項目中使用它們之前先查看可用的選項。
其中的一些組件是：動畫圖像，指示進度的掃描儀，顯示個人資料圖像的化身，基本按鈕和漸變滑塊組件。
14. Nachos用戶界面
Nachos UI擁有30多個可與任何JavaScript或React Native項目一起使用的現成組件，在Github上獲得了1,900顆以上的星星。真正有幫助的是，您不必擔心任何組件的樣式。您要做的就是將任何預先設置樣式的輸入從一個組件導入到另一個組件。安裝Nachos UI工具包後，選擇所需的任何組件，導入相應的React Native代碼，然後繼續對其進行自定義以適合您的項目。
該免費，開源和社區驅動的軟體使用Avocode（一種功能齊全的工具，用於共享和檢查Photoshop和Sketch設計）。感謝React Native for web，您也可以將其用於基於Web的項目。
15.豪特姆
Shoutem是一個應用程序構建平台，可以通過使用擴展程序或模塊化構建塊來工作，就像在WordPress上使用插件構建網站一樣。藉助40多種全功能的擴展程序，它在Github上收集了450顆以上的星星。擴展包括照片和視頻，產品，事件，餐廳菜單等的畫廊。您可以在應用中自由使用這些開源擴展。而且，通過簡單地分叉它們，您可以根據需要進行任何修改。
Shoutem提供許多移動後端服務，例如分析，用戶身份驗證，布局，推送通知等。此外，還有許多編碼良好的主題供您使用和定製。 Shoutem使用100％JavaScript和React Native。
好吧，這就是我們最好的React Native組件庫的列表。您選擇哪一個？分享評論。
別忘了加入我們的速成班，以加快WordPress網站的速度。通過一些簡單的修復，您甚至可以減少50-80％的載入時間：