在 React Native 中自定义步骤指示器

Question

我使用

react-native-step-indicator

创建此步骤指示器

我想自定义指标内的标签以显示符号而不是数字，类似于此图：

我尝试了各种方法，但找不到实现这一目标的方法。

下面是我当前的代码：

  <StepIndicator
            stepCount={getStepsData?.getSteps?.length}
            customStyles={styles.customStyles}
            currentPosition={activePosition}
            direction="vertical"
            labels={getStepsData?.getSteps?.map((step) => step.name)}
            onPress={(position) => setActivePosition(position)}
            renderLabel={({ position, stepStatus, label, currentPosition }) => {
              return (
                <View key={position}>
                  <Text style={position === activePosition ? styles.pressedTitle : styles.title}>{getStepsData?.getSteps[position].name}</Text>
                  {position === activePosition &&
                    <Text style={styles.stepDescription}>{getStepsData?.getSteps[position].description}</Text>
                  }
                </View>
              );
            }}
          />    

自定义样式：

customStyles: {
        stepIndicatorSize: 30,
        labelAlign: 'flex-start',
        currentStepIndicatorSize: 40,
        separatorStrokeWidth: 3,
        currentStepStrokeWidth: 5,
        stepStrokeCurrentColor: Colors.DeepGreen,
        separatorFinishedColor: Colors.DeepGreen,
        separatorUnFinishedColor: Colors.DeepGreen,
        stepIndicatorFinishedColor: Colors.DeepGreen,
        stepIndicatorUnFinishedColor: Colors.DeepGreen,
        stepIndicatorCurrentColor: Colors.white,
        stepIndicatorLabelFontSize: 15,
        currentStepIndicatorLabelFontSize: 15,
        stepIndicatorLabelCurrentColor: '#000000',
        stepIndicatorLabelFinishedColor: Colors.white,
        stepIndicatorLabelUnFinishedColor: Colors.white,
        labelColor: Colors.DarkSlate,
        labelSize: 15,
        currentStepLabelColor: Colors.DeepGreen,
    },

Answer 1

您需要传递

renderStepIndicator

道具。它控制步骤指示器形状内显示的内容，如下所示：

          renderStepIndicator={({ position, stepStatus }) => {
            let textColor: ObjectDotNotation<
                ThemeDesignTokens['color']['text']
            > = 'body';
            switch (stepStatus) {
                case 'current':
                    textColor = 'stepIndicatorCurrentColor';
                    break;
                case 'finished':
                    textColor = 'stepIndicatorFinishedColor';
                    break;
                case 'unfinished':
                    textColor = 'stepIndicatorUnFinishedColor';
                    break;
                default:
                    break;
            }

            return (
                <Text
                    color={textColor}
                    fontFamily={'body.regular'}
                    fontSize={'extraExtraSmall'}
                >
                    {position}
                </Text>
            );
        }}