不同 React Native UI 庫的比較

---

Facebook 開發了 React Native 來構建原生編譯的跨平臺應用程式。它在希望建立可在 Android 和 iOS 裝置上使用的應用程式的移動應用程式開發人員中非常受歡迎。

React Native 開始興起，因為它贏得了不斷增長的社群的信任，包括預製 UI 元件和 React Native 庫。

Uber Eats、Instagram、Pinterest、Airbnb、Skype 等的建立都使用了它們的 React Native 平臺，並且它們都是不言而喻的。

React Native UI 元素

React Native 是一個開源的 Javascript 庫，可幫助開發人員為 iOS 和 Android 平臺建立移動應用程式。

超過 70% 的公司更喜歡 React Native 而不是其他 UI 庫。

React Native 由兩部分組成：UI 和邏輯。UI 部分不需要任何 JavaScript 知識，而是需要您使用 JSX 或 ES6 JavaScript 語法。它使用 React 的預設模板引擎 JSX 或 ES6 JavaScript 語法，並提供許多自定義元件。

React Native 中的 UI 元素表示為一個簡單的元件，可用於以程式設計方式建立自定義元件。

由於其靈活的渲染能力，React Native 可以執行在 Android、Windows Phone 8+、iOS、Tizen（三星）、Ubuntu Touch、Windows 8+ 和 Mac OS X 上。React Native 還可以利用每個平臺上的原生 API 來提供更接近這些平臺的原生體驗。

React Native 的 UI 庫

我們將在本文中討論一些最流行的 react-native UI 庫 -

React Native Papers

React Native Papers 和 React Native Components 非常相似。主要區別在於 React Native Paper 的 UI 元素基於 Material Style UI。如果您欣賞其 Material UI 展示系統，React Native Paper 似乎是您要使用的 UI 庫。

在使用 React Native Paper 時，您很可能會經常使用主題功能。主題允許您整合您獨特的介面設計框架和庫的美學。您可以採用您的顏色設計和獨特的排版。

Styled-Components

藉助 styled-components，使用者可以像 React 元件一樣編寫 CSS，從而實現自動字首和動態格式化。它也支援 React Native。通常，React Native 中的設計被寫成 JavaScript 實體。

但是，將樣式定義為元件使您能夠建立可重用元素、易於理解的程式碼以及樣式的各種用途，從而減少程式碼總量。

React Native Elements

Web 開發領域內的一些 UI 庫，如 MaterialUI 和 Bootstrap，可以節省您從頭開始建立樣式的工作。您可以受益於更好的跨瀏覽器相容性或符合道德的設計。

React Native Elements 是最受歡迎的 React Native UI 庫，因為它擁有出色的文件、易於安裝併為 Android 和 Ios 提供了適當的支援。

React Native 信用卡輸入

使用 React Native 信用卡輸入看起來非常簡單。它透過允許簡單地輸入信用卡資訊來提供出色的使用者體驗，並且具有令人興奮的動畫和愉悅的使用者介面。

• 使用 React Native 信用卡輸入可以更自然地提交付款資訊。

• 還包括可配置的設計，允許您整合您首選的圖示和佈局。

• 管理信用卡資訊驗證並提供自動填充選項。

擴充套件 React Native StyleSheet

儘管 React Native Extended StyleSheet 與內建的 React Native StyleSheet 概念化類似，但它帶來了更多好處，包括主題、動態樣式、變數和媒體查詢。

Extended StyleSheet 是 React Native 樣式擴充套件，用於深度自定義應用程式的樣式。它允許您使用 Sass、Bootstrap 或任何其他 CSS 擴充套件。

樣式表不僅限於設定 UI 元素的樣式，還可以用於應用程式的任何其他部分，例如設定 React 元件的樣式或定義自定義字型。該模組還提供了一種方便的方法來為您的 React Native 應用程式定義跨平臺 UI 樣式。

React Native 向量符號

類似於路標，移動軟體圖示對於導航至關重要。沒有它們，使用者將無法使用相同的應用程式。這些圖示向用戶清楚地表明瞭 UI 的含義，併為他們提供了對應用程式的清晰視覺感知。建議使用 react-native-vectoricons，因為它們 -

• 易於使用且高度適應性強

• 包含廣泛使用的圖示集合，如 MaterialIcons 和 FontAwesome。

• 支援多個平臺，如 Windows、Web、Android、iOS 等。

SVG React Native

SVG 或可縮放向量圖形標記語言，依賴於 XML 描述二維向量插圖。它對視覺效果有效，因為 HTML 僅用於文字，根據 MDN。

SVG 使用其他廣泛使用的 Web 標準（如 SMIL、DOM、CSS 和 JavaScript）在每個尺寸下都清晰地顯示資料。

React Native 在預設情況下不啟用 SVG，這就是為什麼您可以使用 React Native 在 Android 和 iOS 上使用此模組檢視 SVG。

React Native Gifted Chat

react-native-gifted-chat 是一個很棒的包，當您想要向 React Native 應用程式新增對話時，它可以輕鬆構建 UI 聊天功能。

該庫提供 Web、iOS 和 Android 支援。由於 react-native-gifted-chat 缺少原生程式碼，因此無需連結。您可以輕鬆地使用 npm 或 Yarn 獲取該包 -

yarn add react-native-gifted-chat

React Native Lottie

Airbnb 建立了 Lottie 庫來轉換 Adobe After Effects 圖形。它支援 Web、iOS 和 Android。透過在 React Native 中提供元素包裝器 API，reactnative-Lottie 使使用者能夠利用 Lottie 圖形。

您可以像設定任何其他 React Native 庫一樣設定它。在將 LottieView 作為元素匯入時，您可以提供動畫源的路徑。Lottie 動畫可在 LottieFiles 上獲得。

React-Native Animatable

現在，React Native 的 UI 可以包含轉換和動畫，這要歸功於 react-nativeanimatable。

可以將其實用性描述性 API 元素用作要顯示的元件或要應用某些轉換的元件的包裝器。最好的部分是轉換的方向、延遲和長度都是可調節的。

結論

React Native 社群非常多樣化，每個庫都提供了不同的優勢，因此很難選擇合適的庫。但是，您可以選擇最適合您的專案和需求的解決方案。