wehub-resource-sync
217 lines
6.0 KiB
Markdown
217 lines
6.0 KiB
Markdown
<!-- WEHUB_ZH_README -->
|
|
> [!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 文件为准。
|
|
|
|
<a href="https://margelo.com">
|
|
<picture>
|
|
<source media="(prefers-color-scheme: dark)" srcset="./img/bg-dark.png" />
|
|
<source media="(prefers-color-scheme: light)" srcset="./img/bg-light.png" />
|
|
<img alt="Nitro Modules" src="./img/bg-light.png" />
|
|
</picture>
|
|
</a>
|
|
|
|
<div align="center">
|
|
|
|
<h1>
|
|
📈 <br/>
|
|
react-native-graph <br/> <br/>
|
|
<img src="./img/demo.gif" align="center" height="130">
|
|
</h1>
|
|
|
|
<b>适用于 React Native 的精美高性能图表。</b>
|
|
</div>
|
|
|
|
## 简介
|
|
|
|
**react-native-graph** 是基于高性能 2D 图形渲染引擎「Skia」实现的折线图（Line Graph）。它被用于 [Pink Panda Wallet app](https://pinkpanda.io)，每天为数千个代币图表提供支持。
|
|
|
|
* 🏎️ 比 react-native-svg 图表更快、更流畅
|
|
* ⚡️ Skia 原生路径插值
|
|
* 🐎 最高可达 120 FPS 动画
|
|
* 📈 三次贝塞尔（Cubic Bezier）渲染，边缘更平滑
|
|
* 👍 流畅的平移/scrubbing 手势
|
|
* 💰 专为加密货币应用和钱包打造
|
|
* ❌ 不会阻塞导航、按压或滚动动画
|
|
|
|
## 安装
|
|
|
|
<pre>
|
|
yarn add <a href="https://github.com/software-mansion/react-native-reanimated">react-native-reanimated</a>
|
|
yarn add <a href="https://github.com/software-mansion/react-native-gesture-handler">react-native-gesture-handler</a>
|
|
yarn add <a href="https://github.com/Shopify/react-native-skia">@shopify/react-native-skia</a>
|
|
yarn add <b>react-native-graph</b>
|
|
</pre>
|
|
|
|
## 用法
|
|
|
|
```jsx
|
|
function App() {
|
|
const priceHistory = usePriceHistory('ethereum')
|
|
|
|
return <LineGraph points={priceHistory} color="#4484B2" />
|
|
}
|
|
```
|
|
|
|
## 配置
|
|
|
|
### `animated`
|
|
|
|
<img src="./img/change.gif" align="right" height="250" />
|
|
|
|
是否在数据变化之间播放动画。
|
|
|
|
动画通过 [Skia animation system](https://shopify.github.io/react-native-skia/docs/animations/animations) 运行，并完全在原生层进行插值，以确保最佳性能。
|
|
|
|
若 `animated` 为 `false`，将使用轻量级图表渲染器实现，非常适合在大型列表中展示大量图表。
|
|
|
|
示例：
|
|
|
|
```jsx
|
|
<LineGraph
|
|
points={priceHistory}
|
|
animated={true}
|
|
color="#4484B2"
|
|
/>
|
|
```
|
|
|
|
---
|
|
|
|
### `enablePanGesture`
|
|
|
|
<img src="./img/pan.gif" align="right" height="250" />
|
|
|
|
是否启用平移手势。
|
|
|
|
> 需要将 `animated` 设为 `true`。
|
|
|
|
当用户与图表交互时会触发三个事件：
|
|
|
|
1. `onGestureStart`：用户按下并按住图表时触发一次。平移手势 _激活_。
|
|
2. `onPointSelected`：用户平移经过每个数据点时触发。可用此事件更新标签或在图表中高亮选中项。
|
|
3. `onGestureEnd`：用户松开手指、平移手势 _停用_ 时触发一次。
|
|
|
|
可通过以下 props 配置平移手势：
|
|
|
|
1. `panGestureDelay`：设置平移手势激活的延迟。设为 `0` 可在触摸后立即开始。默认值为 `300`。
|
|
|
|
示例：
|
|
|
|
```jsx
|
|
<LineGraph
|
|
points={priceHistory}
|
|
animated={true}
|
|
color="#4484B2"
|
|
enablePanGesture={true}
|
|
onGestureStart={() => hapticFeedback('impactLight')}
|
|
onPointSelected={(p) => updatePriceTitle(p)}
|
|
onGestureEnd={() => resetPriceTitle()}
|
|
/>
|
|
```
|
|
|
|
---
|
|
|
|
### `TopAxisLabel` / `BottomAxisLabel`
|
|
|
|
<img src="./img/label.png" align="right" height="250" />
|
|
|
|
用于在图表上方或下方渲染标签。
|
|
|
|
> 需要将 `animated` 设为 `true`。
|
|
|
|
通常用于渲染图表的最大值和最小值。可从图表点数组中获取最大、最小值，并据此在 X 轴上平滑动画更新标签。
|
|
|
|
示例：
|
|
|
|
```jsx
|
|
<LineGraph
|
|
points={priceHistory}
|
|
animated={true}
|
|
color="#4484B2"
|
|
TopAxisLabel={() => <AxisLabel x={max.x} value={max.value} />}
|
|
BottomAxisLabel={() => <AxisLabel x={min.x} value={min.value} />}
|
|
/>
|
|
```
|
|
|
|
### `Range`
|
|
|
|
<img src="./img/range.png" align="right" height="150" />
|
|
|
|
用于定义图表画布的范围
|
|
|
|
该范围必须大于所提供数据点的跨度。例如，当图表需要显示固定时间段时（无论该时段是否有数据），可使用此功能。
|
|
|
|
<br />
|
|
<br />
|
|
|
|
此示例展示 01/01/2000 至 01/31/2000 时间段内的数据，并将数值限制在 0 到 200 之间：
|
|
|
|
```jsx
|
|
<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`
|
|
|
|
<img src="./img/selection-dot.jpeg" align="right" height="250" />
|
|
|
|
用于渲染选中点。
|
|
|
|
> 需要将 `animated` 和 `enablePanGesture` 设为 `true`。
|
|
|
|
若 `SelectionDot` 缺失或为 `undefined`，将提供带外环和浅阴影的默认样式。
|
|
|
|
示例：
|
|
|
|
```jsx
|
|
<LineGraph
|
|
points={priceHistory}
|
|
animated={true}
|
|
color="#4484B2"
|
|
enablePanGesture={true}
|
|
SelectionDot={CustomSelectionDot}
|
|
/>
|
|
```
|
|
|
|
参见此 [示例 `<SelectionDot />` 组件](./example/src/components/CustomSelectionDot.tsx)。
|
|
|
|
## 赞助
|
|
|
|
<img src="./img/pinkpanda.png" align="right" height="50">
|
|
|
|
**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 打造。如需企业支持或其他商务咨询，请通过 <a href="mailto:hello@margelo.com?subject=Adopting react-native-graph at scale">hello@margelo.com</a> 联系我们！
|
|
|
|
## 致谢
|
|
|
|
特别感谢 [William Candillon](https://github.com/wcandillon) 和 [Christian Falch](https://github.com/chrfalch) 对 React Native Skia 的大力支持与帮助 ❤️
|