wehub/margelo--react-native-graph
1
0
Fork 0
Code Issues Pull Requests Actions Deployments Models Agent Notes Packages Projects Releases Wiki Activity

docs: make Chinese README the default
CI / lint (push) Has been cancelled
Details
CI / build-library (push) Has been cancelled
Details
CI / build-web (push) Has been cancelled
Details

Browse Source
This commit is contained in:
wehub-resource-sync
2026-07-13 10:21:07 +00:00
parent b635496ad5
commit 214f48232f
1 changed files with 52 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+52 -47
View File
@@ -1,3 +1,8 @@
<!-- 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>
@@ -15,22 +20,22 @@
<img src="./img/demo.gif" align="center" height="130">
</h1>
<b>Beautiful, high-performance Graphs/Charts for React Native.</b>
<b>适用于 React Native 的精美高性能图表。</b>
</div>
## About
## 简介
**react-native-graph** is a Line Graph implementation based on the high performance 2D graphics rendering engine "Skia". It's used in the [Pink Panda Wallet app](https://pinkpanda.io) to power thousands of token graphs every day.
**react-native-graph** 是基于高性能 2D 图形渲染引擎「Skia」实现的折线图（Line Graph）。它被用于 [Pink Panda Wallet app](https://pinkpanda.io)，每天为数千个代币图表提供支持。
* 🏎️ Faster and smoother than react-native-svg graphs
* ⚡️ Native path interpolation in Skia
* 🐎 Up to 120 FPS animations
* 📈 Cubic bezier rendering for smoother edges
* 👍 Smooth pan/scrubbing gesture
* 💰 Made for crypto apps and Wallets
* ❌ Does not block navigation, press or scroll animations
* 🏎️ 比 react-native-svg 图表更快、更流畅
* ⚡️ Skia 原生路径插值
* 🐎 最高可达 120 FPS 动画
* 📈 三次贝塞尔（Cubic Bezier）渲染，边缘更平滑
* 👍 流畅的平移/scrubbing 手势
* 💰 专为加密货币应用和钱包打造
* ❌ 不会阻塞导航、按压或滚动动画
## Installation
## 安装
<pre>
yarn add <a href="https://github.com/software-mansion/react-native-reanimated">react-native-reanimated</a>
@@ -39,7 +44,7 @@ yarn add <a href="https://github.com/Shopify/react-native-skia">@shopify/react-n
yarn add <b>react-native-graph</b>
</pre>
## Usage
## 用法
```jsx
function App() {
@@ -49,19 +54,19 @@ function App() {
}
```
## Configuration
## 配置
### `animated`
<img src="./img/change.gif" align="right" height="250" />
Whether to animate between data changes.
是否在数据变化之间播放动画。
Animations are ran using the [Skia animation system](https://shopify.github.io/react-native-skia/docs/animations/animations) and are fully natively interpolated to ensure best possible performance.
动画通过 [Skia animation system](https://shopify.github.io/react-native-skia/docs/animations/animations) 运行，并完全在原生层进行插值，以确保最佳性能。
If `animated` is `false`, a light-weight implementation of the graph renderer will be used, which is optimal for displaying a lot of graphs in large lists.
若 `animated` 为 `false`，将使用轻量级图表渲染器实现，非常适合在大型列表中展示大量图表。
Example:
示例：
```jsx
<LineGraph
@@ -77,21 +82,21 @@ Example:
<img src="./img/pan.gif" align="right" height="250" />
Whether to enable the pan gesture.
是否启用平移手势。
> Requires `animated` to be `true`.
> 需要将 `animated` 设为 `true`。
There are three events fired when the user interacts with the graph:
当用户与图表交互时会触发三个事件：
1. `onGestureStart`: Fired once the user presses and holds down on the graph. The pan gesture _activates_.
2. `onPointSelected`: Fired for each point the user pans through. You can use this event to update labels or highlight selection in the graph.
3. `onGestureEnd`: Fired once the user releases his finger and the pan gesture _deactivates_.
1. `onGestureStart`：用户按下并按住图表时触发一次。平移手势 _激活_。
2. `onPointSelected`：用户平移经过每个数据点时触发。可用此事件更新标签或在图表中高亮选中项。
3. `onGestureEnd`：用户松开手指、平移手势 _停用_ 时触发一次。
The pan gesture can be configured using these props:
可通过以下 props 配置平移手势：
1. `panGestureDelay`: Set delay for the pan gesture to activate. Set to `0` to start immediately after touch. Defaults to `300`.
1. `panGestureDelay`：设置平移手势激活的延迟。设为 `0` 可在触摸后立即开始。默认值为 `300`。
Example:
示例：
```jsx
<LineGraph
@@ -111,13 +116,13 @@ Example:
<img src="./img/label.png" align="right" height="250" />
Used to render labels above or below the Graph.
用于在图表上方或下方渲染标签。
> Requires `animated` to be `true`.
> 需要将 `animated` 设为 `true`。
Usually this is used to render the maximum and minimum values of the Graph. You can get the maximum and minimum values from your graph points array, and smoothly animate the labels on the X axis accordingly.
通常用于渲染图表的最大值和最小值。可从图表点数组中获取最大、最小值，并据此在 X 轴上平滑动画更新标签。
Example:
示例：
```jsx
<LineGraph
@@ -133,14 +138,14 @@ Example:
<img src="./img/range.png" align="right" height="150" />
Used to define a range for the graph canvas
用于定义图表画布的范围
This range has to be bigger than the span of the provided data points. This feature can be used, e.g. if the graph should show a fixed timeframe, whether there's data for that period or not.
该范围必须大于所提供数据点的跨度。例如，当图表需要显示固定时间段时（无论该时段是否有数据），可使用此功能。
<br />
<br />
This example shows data in the timeframe between 01/01/2000 to 01/31/2000 and caps the value between 0 and 200:
此示例展示 01/01/2000 至 01/31/2000 时间段内的数据，并将数值限制在 0 到 200 之间：
```jsx
<LineGraph
@@ -170,13 +175,13 @@ This example shows data in the timeframe between 01/01/2000 to 01/31/2000 and ca
<img src="./img/selection-dot.jpeg" align="right" height="250" />
Used to render the selection dot.
用于渲染选中点。
> Requires `animated` and `enablePanGesture` to be `true`.
> 需要将 `animated` 和 `enablePanGesture` 设为 `true`。
If `SelectionDot` is missing or `undefined`, a default one is provided with an outer ring and light shadow.
若 `SelectionDot` 缺失或为 `undefined`，将提供带外环和浅阴影的默认样式。
Example:
示例：
```jsx
<LineGraph
@@ -188,24 +193,24 @@ Example:
/>
```
See this [example `<SelectionDot />` component](./example/src/components/CustomSelectionDot.tsx).
参见此 [示例 `<SelectionDot />` 组件](./example/src/components/CustomSelectionDot.tsx)。
## Sponsor
## 赞助
<img src="./img/pinkpanda.png" align="right" height="50">
**react-native-graph** is sponsored by [Pink Panda](https://pinkpanda.io).
**react-native-graph** 由 [Pink Panda](https://pinkpanda.io). 赞助
Download the Pink Panda mobile app to see react-native-graph in action!
下载 Pink Panda 移动应用，亲眼看看 react-native-graph 的实际效果！
## Community Discord
## 社区 Discord
[Join the Margelo Community Discord](https://discord.gg/6CSHz2qAvA) to chat about react-native-graph or other Margelo libraries.
[加入 Margelo Community Discord](https://discord.gg/6CSHz2qAvA)，讨论 react-native-graph 或其他 Margelo 库。
## Adopting at scale
## 规模化采用
react-native-graph was built at Margelo, an elite app development agency. For enterprise support or other business inquiries, contact us at <a href="mailto:hello@margelo.com?subject=Adopting react-native-graph at scale">hello@margelo.com</a>!
react-native-graph 由精英应用开发机构 Margelo 打造。如需企业支持或其他商务咨询，请通过 <a href="mailto:hello@margelo.com?subject=Adopting react-native-graph at scale">hello@margelo.com</a> 联系我们！
## Thanks
## 致谢
Special thanks to [William Candillon](https://github.com/wcandillon) and [Christian Falch](https://github.com/chrfalch) for their amazing help and support for React Native Skia ❤️
特别感谢 [William Candillon](https://github.com/wcandillon) 和 [Christian Falch](https://github.com/chrfalch) 对 React Native Skia 的大力支持与帮助 ❤️