如何在React Native中创建如图所示的垂直步进器？

可以通过HTML结合CSS快速实现这种两侧带文本的垂直步进器，以下是完整实现代码：

HTML 结构 #

<div class="vertical-stepper">
  <div class="step">
    <span class="step-text left">左侧文本 1</span>
    <div class="step-node">1</div>
    <span class="step-text right">右侧文本 1</span>
  </div>
  <div class="step">
    <span class="step-text left">左侧文本 2</span>
    <div class="step-node active">2</div>
    <span class="step-text right">右侧文本 2</span>
  </div>
  <div class="step">
    <span class="step-text left">左侧文本 3</span>
    <div class="step-node">3</div>
    <span class="step-text right">右侧文本 3</span>
  </div>
  <div class="step">
    <span class="step-text left">左侧文本 4</span>
    <div class="step-node">4</div>
    <span class="step-text right">右侧文本 4</span>
  </div>
</div>

CSS 样式 #

.vertical-stepper {
  position: relative;
  max-width: 600px;
  margin: 2rem auto;
}

/* 垂直连接线 */
.vertical-stepper::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #e0e0e0;
  transform: translateX(-50%);
  z-index: 0;
}

.step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.step-text {
  width: 45%;
  padding: 0 1rem;
}

.step-node {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #666;
}

.step-node.active {
  background-color: #2196f3;
  color: white;
}

/* 最后一步移除下边距 */
.step:last-child {
  margin-bottom: 0;
}

你可以根据需求调整颜色、尺寸、间距等样式，也可以通过JavaScript动态切换active类来标记当前步骤。

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