使用 react-native-progress-steps 更改进度步骤指示器的边框宽度答案

【问题标题】：Change border width of progress step indicators using react-native-progress-steps使用 react-native-progress-steps 更改进度步骤指示器的边框宽度
【发布时间】：2020-12-09 02:17:42
【问题描述】：

我正在尝试在使用 react-native-progress-steps (https://github.com/colbymillerdev/react-native-progress-steps) 时设置进度步骤指示器的边框宽度——不是连接线的宽度，而是每个步骤圆圈的边框。文档中没有提到这些样式。有什么解决方法吗？

【问题讨论】：

标签： react-native styling react-native-progress-steps

【解决方案1】：

您可以通过转到

来覆盖默认的边框宽度和 StepsIcon 的任何其他样式

> node_modules\react-native-progress-steps\src\ProgressSteps\StepIcon.js

在第 153 行，用您选择的值覆盖borderWidth。

例子：

//StepIcon.js
return (
      <View style={{ flexDirection: 'column', alignItems: 'center' }}>
        {/* below you can see that I have appended the border width of 10*/}
        <View style={{ ...styles.circleStyle, ...{borderWidth: this.props.isActiveStep?10:0} }}> 
          <Text style={styles.circleText}>
            {this.props.isCompletedStep ? (
              <Text style={{ color: this.props.completedCheckColor }}>&#10003;</Text>
            ) : (
              <Text style={styles.stepNum}>{this.props.stepNum}</Text>
            )}
          </Text>
//....
)

【讨论】：

最后我采用了这种方法，谢谢指出！太糟糕了，当其他一切都可以自定义时，没有设置边框宽度样式的选项。