margelo--react-native-graph/README.md

Note

本文档由 WeHub 基于上游 README 翻译整理，属于社区翻译，非官方中文文档。
English · 原始项目 · 上游 README
原作者、版权与许可证归属以原始项目及本仓库 LICENSE 文件为准。

📈
react-native-graph

适用于 React Native 的精美高性能图表。

简介

react-native-graph 是基于高性能 2D 图形渲染引擎「Skia」实现的折线图（Line Graph）。它被用于 Pink Panda Wallet app，每天为数千个代币图表提供支持。

• 🏎️ 比 react-native-svg 图表更快、更流畅
• ⚡️ Skia 原生路径插值
• 🐎 最高可达 120 FPS 动画
• 📈 三次贝塞尔（Cubic Bezier）渲染，边缘更平滑
• 👍 流畅的平移/scrubbing 手势
• 💰 专为加密货币应用和钱包打造
• ❌ 不会阻塞导航、按压或滚动动画

安装

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

用法

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

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

配置

animated

是否在数据变化之间播放动画。

动画通过 Skia animation system 运行，并完全在原生层进行插值，以确保最佳性能。

若 animated 为 false，将使用轻量级图表渲染器实现，非常适合在大型列表中展示大量图表。

示例：

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

---

enablePanGesture

是否启用平移手势。

需要将 animated 设为 true。

当用户与图表交互时会触发三个事件：

1. onGestureStart：用户按下并按住图表时触发一次。平移手势 激活。
2. onPointSelected：用户平移经过每个数据点时触发。可用此事件更新标签或在图表中高亮选中项。
3. onGestureEnd：用户松开手指、平移手势 停用 时触发一次。

可通过以下 props 配置平移手势：

1. panGestureDelay：设置平移手势激活的延迟。设为 0 可在触摸后立即开始。默认值为 300。

示例：

<LineGraph
  points={priceHistory}
  animated={true}
  color="#4484B2"
  enablePanGesture={true}
  onGestureStart={() => hapticFeedback('impactLight')}
  onPointSelected={(p) => updatePriceTitle(p)}
  onGestureEnd={() => resetPriceTitle()}
/>

---

TopAxisLabel / BottomAxisLabel

用于在图表上方或下方渲染标签。

需要将 animated 设为 true。

通常用于渲染图表的最大值和最小值。可从图表点数组中获取最大、最小值，并据此在 X 轴上平滑动画更新标签。

示例：

<LineGraph
  points={priceHistory}
  animated={true}
  color="#4484B2"
  TopAxisLabel={() => <AxisLabel x={max.x} value={max.value} />}
  BottomAxisLabel={() => <AxisLabel x={min.x} value={min.value} />}
/>

Range

用于定义图表画布的范围

该范围必须大于所提供数据点的跨度。例如，当图表需要显示固定时间段时（无论该时段是否有数据），可使用此功能。

此示例展示 01/01/2000 至 01/31/2000 时间段内的数据，并将数值限制在 0 到 200 之间：

<LineGraph
  points={priceHistory}
  animated={true}
  color="#4484B2"
  enablePanGesture={true}
  range={{
    x: {
      min: new Date(new Date(2000, 1, 1).getTime()),
      max: new Date(
        new Date(2000, 1, 1).getTime() +
        31 * 1000 * 60 * 60 * 24
      )
    },
    y: {
      min: 0,
      max: 200
    }
  }}
/>

---

SelectionDot

用于渲染选中点。

需要将 animated 和 enablePanGesture 设为 true。

若 SelectionDot 缺失或为 undefined，将提供带外环和浅阴影的默认样式。

示例：

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

参见此 示例 <SelectionDot /> 组件。

赞助

react-native-graph 由 Pink Panda. 赞助

下载 Pink Panda 移动应用，亲眼看看 react-native-graph 的实际效果！

社区 Discord

加入 Margelo Community Discord，讨论 react-native-graph 或其他 Margelo 库。

规模化采用

react-native-graph 由精英应用开发机构 Margelo 打造。如需企业支持或其他商务咨询，请通过 hello@margelo.com 联系我们！

致谢

特别感谢 William Candillon 和 Christian Falch 对 React Native Skia 的大力支持与帮助 ❤️