React Native 分段进度条使用react-native-svg绘制垂直线实现思路求助

你当前的实现方案是合理的，核心是通过strokeDasharray给水平进度条设置固定的分段长度和间隙长度，间隙的位置刚好对应垂直线的视觉效果，这个方案在节点分值间距完全均等的场景下可以正常运行，实现成本也很低。

但这个方案存在明显局限性：你给出的示例分值数组[200, 500, 800, 1200, 2000]的区间差分别是300、300、400、800，属于非均等间距，固定的segmentWidth和gapWidth无法适配这种不等距的节点，无法准确对应每个分值节点的位置。

更通用的垂直线实现思路如下：

• 先做数值到坐标的映射：首先取分值数组的最大值作为总分值基准，每个节点的X坐标计算公式为 (节点分值 / 最大分值) * 进度条总宽度，用户当前分值的X坐标也用同样的逻辑计算，确保坐标和分值完全对应。
• 单独绘制垂直线：遍历所有分值节点的X坐标，加上用户当前分值的X坐标，每个坐标单独绘制一条<Line>组件，设置y1=0、y2=进度条高度，自定义stroke颜色和宽度即可。这个方案不管节点间距是否均等都能适配，逻辑更直观，后续如果要调整垂直线的样式、在垂直线下方标注对应分值，都可以直接基于每个坐标单独拓展，不用修改进度条本身的渲染逻辑。

如果你的业务场景中所有节点分值的间距都是均等的，现有方案可以正常使用；如果需要适配不等距节点，单独绘制垂直线的方案灵活性和可维护性更高。

内容的提问来源于stack exchange，提问作者mksd