margelo/react-native-graph

这是什么？

核心功能

• 01基于 Skia 渲染折线图，三次贝塞尔曲线使边缘更平滑。
• 02数据切换时带动画过渡，动画在 UI 线程执行。
• 03支持长按拖动查看数据点，并提供选中回调。
• 04提供静态渲染模式，便于在列表中轻量展示大量图表。
• 05选中点标记、末尾指示点和顶部、底部标签均可自定义。
• 06可通过 range 固定 x 轴和 y 轴范围，展示特定时间段或数值区间。

适用场景

• 在加密钱包或交易应用中展示代币或资产的价格走势。
• 在 React Native 应用中展示股票或投资组合的收益曲线。
• 在可滚动列表中渲染大量小型走势图。
• 为图表添加拖动交互，随手指滑动实时更新数值标签。

快速上手

1. 1

   安装对等依赖 Reanimated、Gesture Handler 和 Skia

   yarn add react-native-reanimated
2. 2

   安装 react-native-graph 本体

   yarn add react-native-graph
3. 3

   使用 GraphPoint 数组和 color 属性渲染 LineGraph 组件

使用前须知

• !需要同时安装 Reanimated、Gesture Handler 和 Skia。
• !拖动手势、标签、选择点和渐变填充仅在 animated 为 true 时可用。
• !组件不负责获取数据，需要自行提供数据点。
• !x 轴不支持分类字符串值。

标签

常见问题

react-native-graph 是什么？

基于 Skia 的 React Native 折线图组件，支持动画、贝塞尔曲线和触摸拖动查看数据点。 react-native-graph 是一个用于 React Native 的折线图组件，底层基于 Skia 2D 图形引擎渲染。它绘制平滑的三次贝塞尔曲线，并支持数据切换时的动画过渡，动画在 UI 线程上运行。

react-native-graph 可以免费使用吗？用的什么许可证？

react-native-graph 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

react-native-graph 还在维护吗？

活跃维护中。react-native-graph 最近一次提交是在 2026年10月13日。

react-native-graph 适合用来做什么？

在加密钱包或交易应用中展示代币或资产的价格走势。 在 React Native 应用中展示股票或投资组合的收益曲线。 在可滚动列表中渲染大量小型走势图。 为图表添加拖动交互，随手指滑动实时更新数值标签。

react-native-graph 怎么安装和运行？

安装对等依赖 Reanimated、Gesture Handler 和 Skia: yarn add react-native-reanimated 安装 react-native-graph 本体: yarn add react-native-graph 使用 GraphPoint 数组和 color 属性渲染 LineGraph 组件

在哪里获取 react-native-graph？

源代码和安装说明在 GitHub 上：https://github.com/margelo/react-native-graph