react-native-graph图表库实战教程

react-native-graph图表库实战教程

SEO关键词

React Native 图表库、react-native-graph、Skia 图表、React Native 折线图、移动端高性能图表、React Native 手势图表、@shopify/react-native-skia 使用教程、Crypto 图表实现、RN 动画图表

大家好 这里是「代码简单说`,欢迎大家关注同名公众号,不定时更新更多实用有趣的教程 也欢迎大家在评论区一起讨论交流!~

在这里插入图片描述

一、背景说明（实际开发场景）

在做移动端数据可视化时（比如行情、价格走势、资产曲线），我在 RN 项目中经常遇到一个问题：

• react-native-svg 在大量数据 + 动画时掉帧明显
• 手势交互（拖动/选点）容易卡顿
• 图表组件在列表中复用时性能波动大

后来接触到 react-native-graph（基于 Skia），核心思路是：

用 Skia 直接做 2D 渲染 + 原生路径插值 + 动画系统，绕开 JS bridge 的性能瓶颈

二、react-native-graph 是什么

react-native-graph 是一个基于 @shopify/react-native-skia 的高性能折线图组件，主要用于移动端实时数据展示（尤其是金融/加密资产场景）。

典型应用：

• 加密货币价格曲线
• 股票走势
• 实时传感器数据
• 钱包资产变化图

三、核心能力特点

从工程角度拆解，它主要优化了三类问题：

1. 渲染性能（Skia）

• GPU 加速绘制路径
• 避免 SVG DOM-like 结构
• 曲线插值在 native 层完成

2. 动画系统

• 基于 Skia Animation System
• 120 FPS 理论能力（取决于设备）
• 数据更新时平滑过渡

3. 手势交互

• pan gesture 不阻塞 UI thread
• 支持 scrub（拖动选点）

四、安装依赖

yarn add react-native-reanimated
yarn add react-native-gesture-handler
yarn add @shopify/react-native-skia
yarn add react-native-graph

注意点：

• reanimated 和 gesture-handler 必须先配置
• Skia 依赖原生模块，需要重新 build

五、基础用法

最简单的折线图：

function App() {
  const priceHistory = usePriceHistory('ethereum')

  return (
    <LineGraph
      points={priceHistory}
      color="#4484B2"
    />
  )
}

points 数据结构一般类似：

[
  { x: 1710000000000, y: 1200 },
  { x: 1710003600000, y: 1230 },
]

六、关键配置解析

1. animated（动画能力）

<LineGraph
  points={priceHistory}
  animated={true}
  color="#4484B2"
/>

作用

• 启用 Skia 动画插值
• 数据变化时平滑过渡

关闭后的表现

• 直接重绘（适合长列表性能优化）

2. enablePanGesture（手势交互）

<LineGraph
  points={priceHistory}
  animated={true}
  enablePanGesture={true}
  onGestureStart={() => console.log('start')}
  onPointSelected={(p) => console.log(p)}
  onGestureEnd={() => console.log('end')}
/>

三个核心事件：

3. AxisLabel（上下标注）

<LineGraph
  points={priceHistory}
  animated={true}
  TopAxisLabel={() => <AxisLabel value={100} />}
  BottomAxisLabel={() => <AxisLabel value={20} />}
/>

常用于：

• 最大值
• 最小值
• 当前值提示

4. range（坐标范围控制）

用于固定图表显示区间：

<LineGraph
  points={priceHistory}
  animated={true}
  range={{
    x: {
      min: new Date(2000, 1, 1),
      max: new Date(2000, 1, 31)
    },
    y: {
      min: 0,
      max: 200
    }
  }}
/>

适用于：

• 固定时间轴（K线）
• 统一缩放比例
• 多图对齐

5. SelectionDot（选中点）

<LineGraph
  points={priceHistory}
  animated={true}
  enablePanGesture={true}
  SelectionDot={CustomSelectionDot}
/>

作用：

• 当前选中数据点高亮
• 支持自定义 UI（如发光点/气泡）

七、工程级使用建议

1. 长列表性能策略

如果是在 FlatList 中渲染多个图：

• 关闭 animated
• 限制 points 数量（采样/降采样）
• 避免频繁 rerender

2. 数据优化（关键）

建议在前端做一次降采样：

function downSample(data, step = 2) {
  return data.filter((_, index) => index % step === 0)
}

3. 手势冲突问题

如果外层有 ScrollView：

• 必须配置 gesture-handler
• 避免 scroll 与 pan 冲突

八、与 react-native-svg 对比

九、总结

react-native-graph 的核心价值不在“画图”，而在：

用 Skia 把图表渲染从 JS 层迁移到 Native GPU 渲染管线

在以下场景更适合使用：

• 金融行情图
• 实时价格曲线
• 高频更新数据图表
• 需要手势交互的图表组件

如果只是简单静态图表，其实 SVG 也足够。

如果需要，我可以再补一版：

• Vue / Web 版 Skia 图表思路对比
• 或者「RN + Skia 实现 K线图完整工程结构」