如何在React Native中创建带连接线的垂直进度路径？

要实现带连接线的垂直进度路径（区分已完成、当前、未完成状态的步骤进度条），这里提供两种实用方案：

一、自定义组件实现（灵活可控） #

核心思路是用View搭建容器，每个步骤项包含节点+文字，同时在节点旁绘制连接线，通过状态控制样式。

完整代码示例 #

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const VerticalProgressSteps = ({ steps, currentStepIndex }) => {
  return (
    <View style={styles.container}>
      {steps.map((step, index) => {
        const isCompleted = index < currentStepIndex;
        const isCurrent = index === currentStepIndex;
        const hasNextStep = index < steps.length - 1;

        return (
          <View key={index} style={styles.stepWrapper}>
            {/* 节点与文字区域 */}
            <View style={styles.stepContent}>
              <View style={[
                styles.node,
                isCompleted && styles.completedNode,
                isCurrent && styles.currentNode
              ]}>
                {isCompleted ? (
                  <Text style={styles.completedText}>✓</Text>
                ) : isCurrent ? (
                  <Text style={styles.currentText}>{index + 1}</Text>
                ) : (
                  <Text style={styles.defaultText}>{index + 1}</Text>
                )}
              </View>
              <Text style={[
                styles.stepText,
                isCompleted && styles.completedText,
                isCurrent && styles.currentText
              ]}>{step.label}</Text>
            </View>
            {/* 连接线（最后一步不显示） */}
            {hasNextStep && (
              <View style={[
                styles.line,
                isCompleted ? styles.completedLine : styles.defaultLine
              ]} />
            )}
          </View>
        );
      })}
    </View>
  );
};

const styles = StyleSheet.create({
  container: { padding: 16 },
  stepWrapper: { flexDirection: 'row', alignItems: 'flex-start' },
  stepContent: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
    marginBottom: 24,
  },
  node: {
    width: 24,
    height: 24,
    borderRadius: 12,
    borderWidth: 2,
    borderColor: '#ccc',
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 12,
  },
  completedNode: { backgroundColor: '#2196F3', borderColor: '#2196F3' },
  currentNode: { borderColor: '#2196F3', backgroundColor: '#fff' },
  completedText: { color: '#fff', fontSize: 14, fontWeight: 'bold' },
  currentText: { color: '#2196F3', fontSize: 14, fontWeight: 'bold' },
  defaultText: { color: '#ccc', fontSize: 14 },
  stepText: { fontSize: 16, color: '#333' },
  line: {
    width: 2,
    height: 48,
    marginLeft: 11, // 对齐节点中心
    marginTop: -24, // 调整位置连接下一个节点
  },
  completedLine: { backgroundColor: '#2196F3' },
  defaultLine: { backgroundColor: '#ccc' },
});

// 调用示例
const App = () => {
  const steps = [
    { label: '第一步：初始化' },
    { label: '第二步：验证信息' },
    { label: '第三步：完成' },
  ];

  return <VerticalProgressSteps steps={steps} currentStepIndex={1} />;
};

export default App;

关键要点 #

• 通过currentStepIndex控制步骤状态（已完成/当前/未完成）
• 连接线的margin值可根据节点尺寸调整，确保对齐节点中心
• 可自由修改节点样式（比如用图标替换文字）、颜色、间距等

二、使用第三方库（快速实现） #

如果不想自定义，可以用现成的进度条库，比如react-native-step-indicator，通过配置样式改成垂直布局：

代码示例 #

import React from 'react';
import { StyleSheet } from 'react-native';
import StepIndicator from 'react-native-step-indicator';

const VerticalStepIndicator = () => {
  const labels = ['第一步', '第二步', '第三步', '第四步'];
  const currentPosition = 1;

  const customStyles = {
    stepIndicatorSize: 24,
    currentStepIndicatorSize: 28,
    separatorStrokeWidth: 2,
    currentStepStrokeWidth: 3,
    stepStrokeCurrentColor: '#2196F3',
    stepStrokeFinishedColor: '#2196F3',
    stepStrokeUnFinishedColor: '#ccc',
    separatorFinishedColor: '#2196F3',
    separatorUnFinishedColor: '#ccc',
    stepIndicatorFinishedColor: '#2196F3',
    stepIndicatorUnFinishedColor: '#fff',
    stepIndicatorCurrentColor: '#fff',
    labelColor: '#999',
    labelSize: 16,
    currentStepLabelColor: '#2196F3',
    // 调整为垂直布局
    stepIndicatorContainer: {
      flexDirection: 'column',
      alignItems: 'flex-start',
      paddingLeft: 8,
    },
    step: { flexDirection: 'row', alignItems: 'center', marginBottom: 24 },
    separator: { width: 2, height: 48, marginLeft: 11, marginTop: -24 },
  };

  return (
    <StepIndicator
      customStyles={customStyles}
      currentPosition={currentPosition}
      labels={labels}
      direction="vertical"
    />
  );
};

export default VerticalStepIndicator;

注意事项 #

• 部分库原生支持垂直方向配置，若不支持则通过自定义样式调整布局
• 库已封装好状态管理，只需传入当前步骤索引即可自动更新样式

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