探索React Native Step Indicator: 优雅的步骤指示器组件

import React from 'react';
import { View, StyleSheet } from 'react-native';
import StepIndicator from 'react-native-step-indicator';
 
const steps = ['Step 1', 'Step 2', 'Step� 3', 'Step 4'];
 
export default class CustomStepIndicator extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentStep: 0,
    };
  }
 
  render() {
    return (
      <View style={styles.container}>
        <StepIndicator
          steps={steps}
          current={this.state.currentStep}
          renderStep={this._renderStep}
          labelColor={'#000000'}
          activeColor={'#0000ff'}
          completedColor={'#808080'}
          uncompletedColor={'#d3d3d3'}
          labelSize={13}
          labelAlign={'center'}
          customStyles={styles}
        />
      </View>
    );
  }
 
  _renderStep = (label, position, isActive) => {
    const color = isActive ? '#00ff00' : '#ff0000';
    return (
      <View style={[styles.step, { backgroundColor: color }]}>
        <Text style={styles.label}>{label}</Text>
      </View>
    );
  };
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  step: {
    justifyContent: 'center',
    alignItems: 'center',
    width: 50,
    height: 50,
    borderRadius: 25,
    marginHorizontal: 8,
    backgroundColor: '#ff0000', // 默认颜色
  },
  label: {
    fontSize: 12,
    color: '#ffffff',
  },
});

这个例子中，我们定义了一个名为CustomStepIndicator的React组件，它使用了StepIndicator组件来显示步骤进度。我们定制了步骤的渲染方式，使每个步骤都有一个圆形背景，并在其中显示步骤的标签。我们还展示了如何使用currentStep状态来更改当前激活的步骤。这个例子简单明了，展示了如何使用react-native-step-indicator库来创建一个可以根据应用程序状态更新的步骤指示器。