如何在 React Native 中创建垂直进度路径？答案

【问题标题】：How to create a vertical progress path in React Native?如何在 React Native 中创建垂直进度路径？
【发布时间】：2023-02-21 00:22:32
【问题描述】：

如何在 React Native 中创建垂直进度路径？请参考下面的第一张图片了解我的当前设计，并参考下面的第二张图片了解我想要的输出（我想要它带有线条）。

这是来自谷歌的一个更清晰的例子

【问题讨论】：

尝试在每个列表项中创建 <View /> 并添加用于创建行的样式（例如：width: 1, height: ITEM_HEIGHT）。您需要使用自定义 UI 来执行此操作

标签： react-native

【解决方案1】：

我设法通过两种方式解决了这个问题。我的第一个想法是为每个步骤（行）设置两个元素，一个用于指示器，一个用于步骤的实际信息。该解决方案存在一些间距问题，但还算不错。为了解决间距问题，我提出了第二个解决方案。

解决方案 1 - 绝对定位线

return (
  <View style={styles.stepContainer}>
    {/* the first element for the indicator and the line */}
    <View style={styles.stepIndicator}>
      {i < steps.length - 1 ? <View style={styles.stepLine}></View> : null}
      <Text style={styles.stepIndicatorText}>{i + 1}</Text>
    </View>
    {/* the second element for the actual step and its information */}
    <View style={styles.step}>
      <Text>{step.name}</Text>
    </View>
  </View>
);

这里的想法是将 stepLine 向下推X并且不要在最后的步骤，因为这会导致一些溢出。

这种方法效果很好，但是当您尝试为步骤添加间距时会出现问题，例如marginBottom。该线将不再连接，因为它受到行高的限制。您可以将间距量硬编码为行的高度，但这很快就会变得难以管理。对于这个问题，我找到了解决方案 2。

解决方案 2 - 两列

<View
  style={{
    flexDirection: "row",
  }}
>
  {/* the column for the line */}
  <View style={styles.stepLineContainer}>
    <View style={styles.stepLine}></View>
  </View>
  {/* the column for the steps */}
  <View
    style={{
      flex: 1,
      gap: 8,
    }}
  >
    {steps.map((step, i) => (
      <View style={styles.stepContainer}>
        {/* the indicator */}
        <View style={styles.stepIndicator}>
          <Text style={styles.stepIndicatorText}>{i + 1}</Text>
        </View>
        <View style={styles.step}>
          <Text>{step.name}</Text>
        </View>
      </View>
    ))}
  </View>
</View>

此解决方案涉及两列。一个用于进度线，一个用于步骤。这里的想法是在左列中有一行，其中弹性盒子, 将具有与 steps 列相同的高度。为了将指示器放在正确的位置，我们可以将它们放在实际的步骤上并给它们一个 position: "absolute"。现在我们可以使用 marginBottom 或更好的 gap 属性为步骤添加间距。

这是两种解决方案的live preview。

【讨论】：