11個React Native 元件庫和 Javascript 資料視覺化庫

前端小智發表於2019-04-28

React Native 元件庫

1. NativeBase

圖片描述

超過 10k stars 和 1k fork,NativeBase 是一個廣受歡迎的 UI 元件庫,它為 React native 提供了幾十個跨平臺元件。當使用 NativeBase 時,你可以使用任何現成的本地第三方庫,並且專案本身圍繞著它提供了豐富的生態系統,從有用的starter-kit可定製的主題模板。這是一個不錯的入門工具包。

2. React Native Elements

圖片描述

在超過1 5k 的 stars ,react-native-elements是一個高度可定製的跨平臺 UI 工具包,完全用 Javascript 構建。 其作者聲稱“React Native Elements 的想法更多的是關於元件結構而不是實際設計,這意味著在設定某些元素時可以更少的樣板,但可以完全控制它們的設計”,這應該使它對新開發人員和經驗豐富的老手都很有吸引力。 這是一個示例 Expo 應用程式,顯示了所有正在執行的元件。

3. Shoutem

clipboard.png

超過 4 k stars 的 Shoutem 是一個 React Native UI Kit,由 UI 元件主題元件動畫三部分組成。該庫為 iOS 和 Android 提供了一組跨平臺元件,所有元件都是可組合和可定製的。每個元件還具有與其他元件一致的預定義樣式,這使得無需手動定義複雜樣式就可以構建複雜元件。

4.UI Kitten

超過 3 k stars 的 UI Kitten 提供了一個可定製和可重用的 react-native 元件工具包,該工具包基於將樣式定義移動到特定位置的概念,使元件可重用,並以一種單一的方式設計樣式。通過傳遞一組不同的變數,可以很容易地動態更改主題。這裡有一個不錯的 Expo 事例,可看看。

5. React Native Material UI

clipboard.png

超過 2 k stars 的庫,帶有一組可高度定製的 UI 元件,實現了 Google’s material design。注意,庫使用了一個名為uiTheme的JS物件,該物件通過上下文傳遞,以獲得最大的可定製性。預設情況下,這個uiTheme物件基於你可以在這裡找到的lightTheme

6. React Native Material Kit

clipboard.png

雖然在 NPM上 釋出於2017年12月,但這個4k stars 的庫仍然值得一提,它有一套基本但有用的UI 元件和主題,用於實現 Google 的 MD。 為什麼? 因為它簡單,實用且對相容較好。 但由於維護相對較少,請謹慎使用。

7. Nachos UI

clipboard.png

超過 1.5k stars 的 Nachos UI 是一個React Native 元件庫,擁有 30 多個可定製元件,多虧了 react-native-web,這些元件也可以在web上工作。

8. React Native UI Library

圖片描述

Wix engineering 正在開發這個最先進的 UI 工具集和 React native (demo)元件庫,它還支援 react-native-animatablereact-native-blur 開箱即用。庫附帶一組預定義的樣式預置(轉換為修飾符),包括顏色、排版、陰影、邊框半徑等。

9. React Native Paper

clipboard.png

超過 3K stars 的 React Native Paper 是一個跨平臺的 UI 元件庫,它遵循了 material design 指南,支援全域性主題化,還有一個可選的 babel-plugin 來減小模組大小。下面是一個Expo 示例應用程式,可以幫助你快速瞭解這個庫。

10. React Native Vector Icons

clipboard.png

超過 10k stars 的庫是 React Native 的一組可自定義圖示,支援NNavBar/TabBar/ToolbarAndroid,,影象源和完整樣式。 不出所料,它非常有用,並被數千個應用程式以及其他UI元件庫(如react-native-paper)使用。 該庫提供了開箱即用的預製捆綁圖示集,以下是庫中所有圖示的完整示例

11. Teaset

clipboard.png

超過 1.35 stars 的Teaset 是一個UI庫,用於 react native,包含20多個純JS(ES6)元件,專注於內容顯示和動作控制。文件很少(但很全),它的簡單性和設計吸引了我的眼球。

Javascript 資料視覺化庫

1. D3js

圖片描述

超過 80k 的 star的 D3.js 可能是最流行和最廣泛的 Javascript 資料視覺化庫。D3 用於基於資料操縱文件,並使用 HTML、SVG 和 CSS 實現資料。D3 對 web標準的強調為你提供了現代瀏覽器的功能,而無需耦合到專有框架,將視覺化元件和資料驅動的 DOM 操作方法結合在一起。它允許你將任意資料繫結到文件物件模型(DOM),然後將資料驅動轉換應用到文件。這裡有一個很好的例子庫

2. ChartJS

clipboard.png

一個非常受歡迎的(40k星)開源 HTML 5圖表庫,使用 canvas 元素的響應式 Web 應用程式。 V.2 提供了混合圖表型別,新的圖表軸型別和漂亮的動畫。 設計簡單而優雅,有 8 種基本圖表型別,你可以將庫與 moment.js 組合用於時間軸。

##3. ThreeJS

clipboard.png

這個非常受歡迎的庫(超過45K星; 1K貢獻者)使用WebGL建立3d動畫。 該專案的靈活性和抽象性意味著它對於視覺化2維或3維資料也很有用。 例如,你也可以使用此指定模組通過 WebGL 進行3D 圖形視覺化,或者嘗試使用此線上遊樂場

4. Echarts & Highcharts

clipboard.png

百度的 Echarts專案(超過30k stars)是一個用於瀏覽器的互動式圖表和視覺化庫。它是用純JavaScript編寫的,基於zrender canvas庫。它支援Canvas、SVG(4.0+)和VML格式的渲染圖表。除了PC和移動瀏覽器,echart 還可以與 node-Canvas 一起使用,實現高效的伺服器端渲染(SSR)。

clipboard.png

Highcharts JS 是超過一個 8K stars 基於 SVG 圖表庫,支援 VML 和舊瀏覽器的 canvas。它聲稱全球 100 家最大的公司中有 72 家使用 eb,這使得它(可能)成為世界上最流行的JS圖表API (Facebook、Twitter)。

5. Metric-Graphics

clipboard.png

MetricsGraphics.j (7k stars)是一個用於視覺化和顯示時間序列資料的優化庫。它相對較小(80kb壓縮),提供了精密且優雅的線形圖、散點圖、直方圖、條形圖和資料表的選擇,以及密度圖和基本線性迴歸等特性。這裡有一個到互動式示例庫的連結

6. Recharts

clipboard.png

Recharts 是一個使用 React 和 D3 構建的圖表庫,支援宣告式 React 元件方式。該庫提供了原生 SVG 支援,輕量級依賴樹(D3子模組)通過元件 props 高度可定製。你可以在文件網站上找到更多的例子。

7. Raphael

clipboard.png

一個 10k stars 的 Javascript 向量庫,用於處理 web 中的向量圖形。該庫使用SVG W3C推薦標準和 VML 作為建立圖形的基礎,因此每個圖形物件也是一個 DOM 物件,你可以附加 JavaScript 事件處理程式。Raphael 目前支援 Firefox 3.0+、Safari 3.0+、Chrome 5.0+、Opera 9.5+和 Internet Explorer 6.0+。

8. C3js

clipboard.png

8k stars 的 C3js 是一個基於 D3 的可重複使用的圖表庫,用於Web應用程式。 該庫為每個元素提供類,因此你可以通過類定義自定義樣式,並通過 D3 直接擴充套件結構。 它還提供了各種 API 和回撥來訪問圖表的狀態。 通過使用它們,你甚至可以在渲染後更新圖表,看看這些例子

9. React Virtualized + React Vis + Victory

clipboard.png

React-vis(5k stars)是優步的一套 React 元件,用於以一致的方式顯示資料,包括線/面/條形圖,熱圖,散點圖,等高線圖,六邊形熱圖等等。 該庫不需要任何先前的 D3 或任何其他資料庫的知識,並提供低階模組化構建塊元件,如 X/Y 軸。

clipboard.png

React virtualized (12k stars)是一組 React 元件,用於高效地渲染大型列表和表格資料。每個發行版都提供ES6、CommonJS 和 UMD 構建,並且該專案支援 Webpack 4 工作流。請注意 react,為了避免版本衝突,必須將 react-dom 指定為對等依賴項。

clipboard.png

Victory 是一個收集 React 可組合元件的集合,用於構建互動式資料視覺化,由強大的實驗室構建,擁有超過6k stars Victory對Web和React Native應用程式使用相同的API,以便於跨平臺製圖。一種優雅而靈活的方式,可以利用 React元件來支援實際的資料視覺化。

10. Raw graphs

圖片描述

超過5K stars 的 Raw 是電子表格和資料視覺化之間的連線連結,用於在d3.js庫之上建立基於向量的自定義視覺化。它可以處理表格資料(擴充套件列表和逗號分隔值),也可以處理來自其他應用程式的複製貼上文字。基於SVG格式,可以使用向量圖形應用程式編輯視覺化,以便進一步改進,或者直接嵌入到web頁面中。

11. Metabase

圖片描述

超過 11k 的stars Metabase中,使用SQL建立資料儀表板是一種非常快速和簡單的方法,不需要知道SQL(但是對於分析人員和資料專業人員使用SQL模式)。你可以建立規範段和度量,將資料傳送到Slack(並使用 MetaBot 在 Slack 中檢視資料)等等。這可能是為你的團隊在內部視覺化資料的一個很好的工具,儘管可能需要進行一些維護。

原文:blog.bitsrc.io/11-react-na…

blog.bitsrc.io/11-javascri…

你的點贊是我持續分享好東西的動力,歡迎點贊!

歡迎加入前端大家庭,裡面會經常分享一些技術資源。

clipboard.png

相關文章