11個React Native 組件庫和 Javascript 數據可視化庫

阿里雲最近在作活動，低至2折，有興趣能夠看看：
https://promotion.aliyun.com/...

---

爲了保證的可讀性，本文采用意譯而非直譯。

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

超過 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

超過 2 k stars 的庫，帶有一組可高度定製的 UI 組件，實現了 Google’s material design。注意，庫使用了一個名爲uiTheme的JS對象，該對象經過上下文傳遞，以得到最大的可定製性。默認狀況下，這個uiTheme對象基於你能夠在這裏找到的lightTheme。

6. React Native Material Kit

雖然在 NPM上 發佈於2017年12月，但這個4k stars 的庫仍然值得一提，它有一套基本但有用的UI 組件和主題，用於實現 Google 的 MD。 爲何？ 由於它簡單，實用且對兼容較好。 但因爲維護相對較少，請謹慎使用。

7. Nachos UI

超過 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-animatable 和 react-native-blur 開箱即用。庫附帶一組預約義的樣式預置(轉換爲修飾符)，包括顏色、排版、陰影、邊框半徑等。

9. React Native Paper

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

10. React Native Vector Icons

超過 10k stars 的庫是 React Native 的一組可自定義圖標，支持NNavBar/TabBar/ToolbarAndroid,，圖像源和完整樣式。 不出所料，它很是有用，並被數千個應用程序以及其餘UI組件庫（如react-native-paper）使用。 該庫提供了開箱即用的預製捆綁圖標集，如下是庫中全部圖標的完整示例。

11. Teaset

超過 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

一個很是受歡迎的（40k星）開源 HTML 5圖表庫，使用 canvas 元素的響應式 Web 應用程序。 V.2 提供了混合圖表類型，新的圖表軸類型和漂亮的動畫。 設計簡單而優雅，有 8 種基本圖表類型，你能夠將庫與 moment.js 組合用於時間軸。

3. ThreeJS

這個很是受歡迎的庫(超過45K星; 1K貢獻者)使用WebGL建立3d動畫。 該項目的靈活性和抽象性意味着它對於可視化2維或3維數據也頗有用。 例如，你也可使用此指定模塊經過 WebGL 進行3D 圖形可視化，或者嘗試使用此在線遊樂場。

4. Echarts & Highcharts

百度的 Echarts項目(超過30k stars)是一個用於瀏覽器的交互式圖表和可視化庫。它是用純JavaScript編寫的，基於zrender canvas庫。它支持Canvas、SVG(4.0+)和VML格式的渲染圖表。除了PC和移動瀏覽器，echart 還能夠與 node-Canvas 一塊兒使用，實現高效的服務器端渲染(SSR)。

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

5. Metric-Graphics

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

6. Recharts

Recharts 是一個使用 React 和 D3 構建的圖表庫，支持聲明式 React 組件方式。該庫提供了原生 SVG 支持，輕量級依賴樹(D3子模塊)經過組件 props 高度可定製。你能夠在文檔網站上找到更多的例子。

7. Raphael

一個 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

8k stars 的 C3js 是一個基於 D3 的可重複使用的圖表庫，用於Web應用程序。 該庫爲每一個元素提供類，所以你能夠經過類定義自定義樣式，並經過 D3 直接擴展結構。 它還提供了各類 API 和回調來訪問圖表的狀態。 經過使用它們，你甚至能夠在渲染後更新圖表，看看這些例子。

9. React Virtualized + React Vis + Victory

[React-vis]45是優步的一套 React 組件，用於以一致的方式顯示數據，包括線/面/條形圖，熱圖，散點圖，等高線圖，六邊形熱圖等等。 該庫不須要任何先前的 D3 或任何其餘數據庫的知識，並提供低級模塊化構建塊組件，如 X/Y 軸。

React virtualized (12k stars)是一組 React 組件，用於高效地渲染大型列表和表格數據。每一個發行版都提供ES六、CommonJS 和 UMD 構建，而且該項目支持 Webpack 4 工做流。請注意 react，爲了不版本衝突，必須將 react-dom 指定爲對等依賴項。

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 中查看數據)等等。這多是爲你的團隊在內部可視化數據的一個很好的工具，儘管可能須要進行一些維護。

原文：https://blog.bitsrc.io/11-rea...

https://blog.bitsrc.io/11-jav...

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

交流

乾貨系列文章彙總以下，以爲不錯點個Star，歡迎 加羣 互相學習。

https://github.com/qq44924588...

我是小智，公衆號「大遷世界」做者，對前端技術保持學習愛好者。我會常常分享本身所學所看的乾貨，在進階的路上，共勉！

關注公衆號，後臺回覆福利，便可看到福利，你懂的。