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

npm install react-native-progress-steps

yarn add react-native-progress-steps

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { ProgressSteps, ProgressStep } from 'react-native-progress-steps';

const App = () => {
  return (
    <View style={styles.container}>
      <ProgressSteps
        activeStepIconBorderWidth={4} // 设置活动步骤的边框宽度
        completedStepIconBorderWidth={4} // 设置已完成步骤的边框宽度
        activeStepIconColor="#4aae4f" // 活动步骤的图标颜色
        completedProgressBarColor="#4aae4f" // 已完成步骤的进度条颜色
        completedStepIconColor="#4aae4f" // 已完成步骤的图标颜色
      >
        <ProgressStep label="Step 1">
          <View style={styles.stepContent}>
            <Text>Step 1 Content</Text>
          </View>
        </ProgressStep>
        <ProgressStep label="Step 2">
          <View style={styles.stepContent}>
            <Text>Step 2 Content</Text>
          </View>
        </ProgressStep>
        <ProgressStep label="Step 3">
          <View style={styles.stepContent}>
            <Text>Step 3 Content</Text>
          </View>
        </ProgressStep>
      </ProgressSteps>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  stepContent: {
    alignItems: 'center',
  },
});

export default App;