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

Question

我试图在使用 react-native-progress-steps （https://github.com/colbymillerdev/react-native-progress-steps）时设置进度步骤指示器的边框宽度 - 而不是连接线的宽度而是每一步圆圈的边界。文档中没有提到这些样式。任何解决方法？

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

Answer 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>
//....
)