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...

我是小智，公众号「大迁世界」做者，对前端技术保持学习爱好者。我会常常分享本身所学所看的干货，在进阶的路上，共勉！

关注公众号，后台回复福利，便可看到福利，你懂的。