时间戳

首页 > 解决方案 > React Native 步骤进度条

react-native - React Native 步骤进度条

问题描述

我需要帮助如何创建如下图所示的进度条，我不需要代码只是一个如何创建垂直线的想法？我已经尝试过 react-native-svg 包，但我失败了。谢谢

进度条

例如，我有一个类似 [200, 500, 800, 1200, 2000] 的数组，我需要创建一个进度条来显示这些值，并且如果用户在 200 - 500 步之间有例如 250 个点，我需要创建那些垂直线。我在屏幕上显示的这个进度条就像该用户的信息一样，他有多少积分以及他需要获得多少积分才能进入下一步（在上面的示例中为 500。）

我没有代码，因为我不知道如何创建垂直线。但我让他们使用这段代码工作

<Svg height={'100%'} width={width} style={styles.someStyle}>
  <Line x1="0" y1="10" x2="100%" y2="10" stroke="url(#grad)" strokeWidth="100%" strokeDasharray={`${segmentWidth} ${gapWidth}`} />
  <Line x1="0" y1="10" x2="100%" y2="10" clipPath="url(#clip)" stroke={'green'} strokeWidth="100%" strokeDasharray={`${segmentWidth} ${gapWidth}`} />
</Svg>

标签： react-native

解决方案

我从后端获取步骤，在步骤之间我需要根据图像中的用户点动态创建垂直线。

推荐阅读