> [!NOTE]
> 本文档由 WeHub 基于上游 README 翻译整理，属于社区翻译，非官方中文文档。
> [English](./README.en.md) · [原始项目](https://github.com/margelo/react-native-graph) · [上游 README](https://github.com/margelo/react-native-graph/blob/HEAD/README.md)
> 原作者、版权与许可证归属以原始项目及本仓库 LICENSE 文件为准。
📈
react-native-graph
适用于 React Native 的精美高性能图表。
## 简介
**react-native-graph** 是基于高性能 2D 图形渲染引擎「Skia」实现的折线图（Line Graph）。它被用于 [Pink Panda Wallet app](https://pinkpanda.io)，每天为数千个代币图表提供支持。
* 🏎️ 比 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
## 用法
```jsx
function App() {
const priceHistory = usePriceHistory('ethereum')
return
}
```
## 配置
### `animated`
是否在数据变化之间播放动画。
动画通过 [Skia animation system](https://shopify.github.io/react-native-skia/docs/animations/animations) 运行，并完全在原生层进行插值，以确保最佳性能。
若 `animated` 为 `false`，将使用轻量级图表渲染器实现，非常适合在大型列表中展示大量图表。
示例：
```jsx
```
---
### `enablePanGesture`
是否启用平移手势。
> 需要将 `animated` 设为 `true`。
当用户与图表交互时会触发三个事件：
1. `onGestureStart`：用户按下并按住图表时触发一次。平移手势 _激活_。
2. `onPointSelected`：用户平移经过每个数据点时触发。可用此事件更新标签或在图表中高亮选中项。
3. `onGestureEnd`：用户松开手指、平移手势 _停用_ 时触发一次。
可通过以下 props 配置平移手势：
1. `panGestureDelay`：设置平移手势激活的延迟。设为 `0` 可在触摸后立即开始。默认值为 `300`。
示例：
```jsx
hapticFeedback('impactLight')}
onPointSelected={(p) => updatePriceTitle(p)}
onGestureEnd={() => resetPriceTitle()}
/>
```
---
### `TopAxisLabel` / `BottomAxisLabel`
用于在图表上方或下方渲染标签。
> 需要将 `animated` 设为 `true`。
通常用于渲染图表的最大值和最小值。可从图表点数组中获取最大、最小值，并据此在 X 轴上平滑动画更新标签。
示例：
```jsx
}
BottomAxisLabel={() => }
/>
```
### `Range`
用于定义图表画布的范围
该范围必须大于所提供数据点的跨度。例如，当图表需要显示固定时间段时（无论该时段是否有数据），可使用此功能。
此示例展示 01/01/2000 至 01/31/2000 时间段内的数据，并将数值限制在 0 到 200 之间：
```jsx
```
---
### `SelectionDot`
用于渲染选中点。
> 需要将 `animated` 和 `enablePanGesture` 设为 `true`。
若 `SelectionDot` 缺失或为 `undefined`，将提供带外环和浅阴影的默认样式。
示例：
```jsx
```
参见此 [示例 `` 组件](./example/src/components/CustomSelectionDot.tsx)。
## 赞助
**react-native-graph** 由 [Pink Panda](https://pinkpanda.io). 赞助
下载 Pink Panda 移动应用，亲眼看看 react-native-graph 的实际效果！
## 社区 Discord
[加入 Margelo Community Discord](https://discord.gg/6CSHz2qAvA)，讨论 react-native-graph 或其他 Margelo 库。
## 规模化采用
react-native-graph 由精英应用开发机构 Margelo 打造。如需企业支持或其他商务咨询，请通过 hello@margelo.com 联系我们！
## 致谢
特别感谢 [William Candillon](https://github.com/wcandillon) 和 [Christian Falch](https://github.com/chrfalch) 对 React Native Skia 的大力支持与帮助 ❤️
