这个项目能做什么

react-native-graph 是一个用于绘制折线图的开源 React Native 组件。README 将其描述为由 Margelo 创建的基于 Skia 的实现,并被用于 Pink Panda Wallet 应用中渲染大量代币图表。其文档重点在于流畅的移动端图表绘制:README 列出了三次贝塞尔曲线渲染、Skia 中的原生路径插值、动画(根据 README 最高可达 120 FPS)、平移/擦除手势,以及与加密钱包风格的价格历史记录的兼容性。 该包导出了一个 LineGraph 组件。其必需的 prop 包括 points(一个包含数值 value 和日期 Date 的 GraphPoint 对象数组)以及 color。它在根视图上接受 React Native ViewProps。一个动画布尔值可在动画渲染器和轻量级静态渲染器之间切换,README 建议在列表中显示多个图表时使用静态渲染器。可选的 range prop 可以覆盖 x 轴、y 轴或两者;否则,坐标轴将根据 points 推断。 动画模式解锁了更多功能。gradientFillColors 在线条下方添加垂直渐变填充。lineThickness 控制描边宽度。enablePanGesture 启用按下并擦除的交互,并提供 onGestureStart、onPointSelected 和 onGestureEnd 回调;panGestureDelay 控制在开始擦除前必须按住的时间。SelectionDot 渲染擦除位置,可以用 null 替换或隐藏。horizontalPadding 和 verticalPadding 调整绘制空间。enableIndicator 和 indicatorPulsating 在最后一个点显示指示器。TopAxisLabel 和 BottomAxisLabel 在图表上方和下方渲染自定义 React 元素。enableFadeInMask 使线条起始部分渐显。部分 prop 被记录为仅限动画模式,包括平移手势、标签、指示器、渐变填充和 SelectionDot。README 指出 selectionDotShadowColor 目前未使用且没有视觉效果。 README 记录了两种渲染后端。Skia 是默认选项。另一种 GPU 画布后端 react-native-tgfx 可以在构建时通过 EXPO_PUBLIC_RN_GRAPH_BACKEND=tgfx(或在带有 Babel inline-environment-variables 插件的纯 React Native 中使用 RN_GRAPH_BACKEND)来选择。只需安装其中一个渲染器;Metro 将两者都视为可选,如果请求了 tgfx 但未安装,图表会发出一次警告并回退到 Skia。自定义 SelectionDot 必须从当前激活的渲染器导入形状。该包导出 GRAPH_BACKEND 以检查构建解析到了哪个渲染器('skia' 或 'tgfx')。 安装需要 react-native-reanimated、react-native-gesture-handler 和 @shopify/react-native-skia(用于默认后端),以及 react-native-graph 本身。README 包含了一个使用 usePriceHistory hook 的 LineGraph 使用示例,以及关于动画、平移手势、范围和自定义 SelectionDot 的 prop 示例。它还链接到仓库中的自定义 SelectionDot 示例。该项目由 Pink Panda 赞助,并拥有 Margelo 社区 Discord。README 感谢了 William Candillon 和 Christian Falch 在 React Native Skia 方面提供的帮助。